Jquery Javascript checkbox selection/deselection

Question

I have a HTML form and inside it I have a bunch of checkboxes.

What I am trying to do is this. - If any one checkbox is selected, I want to set a variavle in javascript. - if nothing is selected, I want to set that variable to blank. - I am toggling the class of the checkbox as well.

This is how I am currently doing it.

var checklist = "";
$('.form3 :checkbox').change(function() {           
    $(this).closest('label').toggleClass("checkselected", this.checked);
    if(window.checklist != "OL" )
    {
        window.checklist = "OL";
    }

});

The problem with this code is, if once the variable is set, I am not sure how to clear it is the user deselects all checkboxes and none of the boxes are selected any longer.

Any suggestion? (I am using jQuery)

Reigel Gallarde · Accepted Answer · 2011-10-12 04:03:29Z

2

you might wanna check the number of selected checkboxes.. that way, you would not have a problem. (Well, that is if "OL" does not mean anything...)

var checklist = "";
var checkboxes = $('.form3 :checkbox');
checkboxes.change(function() {           
    $(this).closest('label').toggleClass("checkselected", this.checked);
    checklist = checkboxes.filter(':checked').length;
    // checklist would then be 0 if none selected.
});

answered Oct 12, 2011 at 4:03

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Null Pointer · Accepted Answer · 2011-10-12 04:04:13Z

0

To select all check boxes you can use

$('.form3 :checkbox").attr("checked", true);

To deselect

$('.form3 :checkbox").attr("checked", false);

answered Oct 12, 2011 at 4:04

Null Pointer

9,31926 gold badges77 silver badges119 bronze badges

Comments

Tran Dinh Thoai · Accepted Answer · 2011-10-12 04:18:34Z

Following code is what you need:

<html>
<body>
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <style>
  .checkselected { color: red; }
  </style>
  <div class="form3">
    <label><input type="checkbox" />Option 1</label>
    <label><input type="checkbox" />Option 2</label>
    <label><input type="checkbox" />Option 3</label>
  </div>
  <script>
var checklist = "";
$('.form3 :checkbox').change(function() {           
    $(this).closest('label').toggleClass("checkselected", this.checked);
    if(window.checklist != "OL" )
    {
        window.checklist = "OL";
    }
    var size = $('.form3 :checkbox').length;
    var found = false;
    $('.form3 :checkbox').each(function(index) {
      if (this.checked) {
        found = true;
      }
      if (index == size - 1) {
        if (!found) {
          checklist = '';
        }
      }
    });
    alert(checklist);
});
  </script>
</body>
</html>

Collectives™ on Stack Overflow

Jquery Javascript checkbox selection/deselection

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related