Iam a beginner in jQuery, I know this has been asked before but I dont know whats the proper way to do it for my HTML :
<fieldset>
<legend>ABC</legend>
<label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />
<table>
<tr>
<td>
<input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0">Discs</label>
<input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_0" value="9;71;72;108;109" />
<input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_0" class="xRefButton" />
</td>
</tr>
<tr>
<td>
<input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1">Drums</label>
<input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_1" value="73" />
<input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_1" class="xRefButton" />
</td>
</tr>
<tr>
<td>
<input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2">Pads</label>
<input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_2" value="70" />
<input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_2" class="xRefButton" />
</td>
</tr>
</table>
</fieldset>
I want this to be clicked :
<label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />
And for all checkboxes under table
to be checked or unchecked.
I tried :
// selects all the items in same category
function SelectAll()
{
$(arguments[0]).siblings('table:eq(0)').find(':checkbox').attr('checked', arguments[0].checked);
}
but it didnt work.
You can use
function SelectAll(element)
{
$(element).closest('fieldset').find('table :checkbox').prop('checked', element.checked);
}
The reason your version did not work is that the table is not a sibling of the select-all checkbox.. it is a sibling of the label that contains the checkbox.
You have to do something like this:
$('.selectAllButton input').click(function() {
var checked = $(this).is(':checked');
var el = $('table input[type=checkbox]');
if(checked) {
el.attr('checked', 'checked');
} else {
el.removeAttr('checked');
};
});
The code below looks OK, is simpler, works, but it's not exactly what W3C recommend. and I'm not sure if it works in IE6.
$('.selectAllButton input').click(function() {
var checked = $(this).is(':checked');
$('table input[type=checkbox]').attr('checked', checked);
});
Useful links: 1. W3C Working Draft: input type=checkbox 2. W3C Wiki: checkbox 3. MSDN: checked attribute 4. MDN: input
I hope this can help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.