Create a link box Mark

Public

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

</> CopyGet raw version
html5
  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

</> CopyGet raw version
html5
  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

</> CopyGet raw version
javascript
  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

</> CopyGet raw version
php
  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.

</> CopyGet raw version
javascript
  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. });

Comments