多選框的全選和反選
阿新 • • 發佈:2018-12-23
html:
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript"><pre name="code" class="html"><span style="font-weight: normal;"><span style="white-space:pre"> </span><table> <thead> <tr> <th><input type="checkbox" id="chkAll">全選</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> </tbody> </table></span>
jQuery:
//全選
$('#chkAll').bind('click',function(e){
$('tbody input[type=checkbox]').prop('checked',$(this).prop('checked'));
$(this).prop('checked',$('tbody :checked').length==$('tbody tr').length);
});
/*******************************************************************************************/
//反選
$('tbody input[type=checkbox]').bind('click', function(e) { /* Act on the event */
$('#chkAll').prop('checked',$('tbody :checked').length==$('tbody tr').length);
});