Question

I have made a form with a “Select All” checkbox that selects all the other checkboxes within that that form.

I want to modify it so the select all function will work off of a text link, like below:

Link

<a href="#' id="checkall">Select all checkboxes</a>

Currently it works as below using another checkbox to select all the other checkboxes

Form

<form action="#" method="post" id="myform">

<fieldset>
<div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div>

<div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div>

<div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div>

</fieldset>

</form>

Script

<script type="text/javascript">
$(function () {
$('#checkall').click(function () {
    $('fieldset').find(':checkbox').attr('checked', this.checked);
});
});
</script>

I’ve looked online and can’t find a solution for this, any help will be greatly appreciated, thanks

Answer 1

Change the checkbox to a link and replace this.checked, with true if all you want is for the link to always select all checkboxes.

Update
Try adding data-checked="false" as an attribute of the link in the HTML. Then the following should do the trick:

$('#checkall').click(function () {
    var checked = $(this).data('checked');
    $('fieldset').find(':checkbox').attr('checked', !checked);
    $(this).data('checked', !checked);
});