1. 程式人生 > >多選框的全選和反選

多選框的全選和反選

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);
});