Create a link box Mark


Using jQuery you get the ability to select and cancel the selection boxes for the group at the same time. Using the example below I'll explain how to create a link box CHECK ALL click event using jQuery bliblioteki and conditional logic.
First of all you need to create a group of check boxes ID custom-check and for each check box to apply the class

Get raw version
  1. <ul id="custom-check">
  2. <li><input type="checkbox" name="check1" class="check" /><label>Pole wyboru</label></li>
  3. <li><input type="checkbox" name="check2" class="check" /><label>Pole wyboru</label></li>
  4. <li><input type="checkbox" name="check3" class="check" /><label>Pole wyboru</label></li>
  5. <li><input type="checkbox" name="check4" class="check" /><label>Pole wyboru</label></li>
  6. </ul>

Then add directly before the list box ID checkAll. This field will be used to control the selection of items in the list

Get raw version
  1. <input type="checkbox" name="checkAll" id="checkAll" /><label>Zaznacz wszystkie</label>

Now, with the construction of jQuery select item #checkAll and link to the click event

Get raw version
  1. $('#checkAll').bind(click, function() { });

Another thing that we have to do is to add a variable named checkboxes and a statement that selects all of the items found in the list of suitable class of "check". Variable is created to store a set of matches

Get raw version
  1. $('#checkAll').bind(click, function() {
  2. var checkboxes = $('#custom-check li').find('.check');
  3. });

To enable the selection or deselect check boxes and apply the else if statement to check whether the output # checkAll is selected. If it will apply the attribute 'checked', 'true', and if the item is not selected remove check marks from all boxes stored in the variable checkboxes.

Get raw version
  1. $('#checkAll').bind('click', function() {
  2. var checkboxes = $('#custom-check li').find('.check');
  3. if (this.checked) {
  4. checkboxes.attr('checked', true);
  5. } else {
  6. checkboxes.attr('checked', false);
  7. };
  8. });