so I have some checkboxes, when each one is checked I'm able to get the id number I need from the associated table row and place them into my contacts
array.
I also have a Select all checkbox which is meant to grab all the id numbers and stick them into the same array.
Having a bit of trouble trying to figure out the correct syntax to target the tbody, select every table row's data-id, or every table row's input's value.
http://jsfiddle.net/leongaban/7LCjH/
^ In my fiddle example you can see the numbers get added to my array (or the gray div for visualization).
jQuery
<table>
<thead>
<tr>
<td><input type="checkbox" id="selectall"/></td>
<td>Select All</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<tbody id="tbody">
<tr data-coworker-id="1">
<td><input type="checkbox" class="case" name="case" value="1"/></td>
<td>1</td>
</tr>
<tr data-coworker-id="2">
<td><input type="checkbox" class="case" name="case" value="2"/></td>
<td>2</td>
</tr>
<tr data-coworker-id="3">
<td><input type="checkbox" class="case" name="case" value="3"/></td>
<td>3</td>
</tr>
</tbody>
HTML
<table> <thead> <tr> <td><input type="checkbox" id="selectall"/></td> <td>Select All</td> </tr> <tr> <td colspan="2"><hr/></td> </tr> </thead> <tbody id="tbody"> <tr data-coworker-id="1"> <td><input type="checkbox" class="case" name="case" value="1"/></td> <td>1</td> </tr> <tr data-coworker-id="2"> <td><input type="checkbox" class="case" name="case" value="2"/></td> <td>2</td> </tr> <tr data-coworker-id="3"> <td><input type="checkbox" class="case" name="case" value="3"/></td> <td>3</td> </tr> </tbody>
You can modify your select all handler like so:
$("#selectall").click(function () {
$('.case').attr('checked', this.checked).each(function() {
contacts.push($(this).val())
});
});
Here is a working example:
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
var els = $('.case')
if (els.first().is(':checked') ) {
els.prop('checked', false);
$('#arrayContent').empty();
} else {
els.attr('checked', true);
$.each(els, function(index, el) {
contacts.push( $(el).val() );
});
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join( ', ' ) );
}
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
and here is fiddle link :: http://jsfiddle.net/kkemple/7LCjH/24/
You can try this
$("#selectall").click(function () {
if($('.case:checked').length == $('.case').length){
//deselect all
$('.case').removeAttr("checked");
contacts = [];
}
else{
//select all
$('.case').attr("checked", "checked").each(function(){
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
})
}
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join(','));
//contacts.push($('#tbody').children(tr > td > input).val();)
});
Use find
instead of children
and then loop the elements to add them to the array.
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
$('tbody').find("input").each(function () {
contacts.push($(this).val()+",");
});
$('#arrayContent').append(contacts);
});
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Source: http://api.jquery.com/find/
我知道这不能完全解决使用子项的问题,但是您可以使用$('#tbody').find('input')
查找元素中的所有输入字段。
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.