checkbox功能实现之全选、反选、取消

实例代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<input type="button"   value="全选" />

<input type="button"  value="反选" />

<input type="button"  value="取消" />

<table border="1">

<thead></thead>

<tbody id="tb1">

<tr>

<td><input type="checkbox" /></td>

<td>11</td>

</tr>

<tr>

<td><input type="checkbox" /></td>

<td>22</td>

</tr>

<tr>

<td><input type="checkbox" /></td>

<td>33</td>

</tr>

</tbody>

</table>

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

function CheckAll(){

//  $(‘#tb1‘).find(‘:checkbox‘).attr(‘checked‘,‘checked‘);

$(‘#tb1‘).find(‘:checkbox‘).prop(‘checked‘,true);

// attr和prop区别,attr是针对所有的标签属性进行设置,prop是check和radio复选框的专门属性设置

}

function CheckReverse(){

//找,如果选中了,取消;未选中,则选中;

$(‘#tb1‘).find(‘:checkbox‘).each(function(){

//$(this) 每一个复选框

//$(this).prop(),如果选中了,则用true,否则用false

//attr如果选中;checked,checked=checked

if($(this).prop(‘checked‘)){

$(this).prop(‘checked‘,false);

}else{

$(this).prop(‘checked‘,true);

}

});

}

function CheckCancel(){

// $(‘#tb1‘).find(‘:checkbox‘).removeAttr(‘checked‘);

$(‘#tb1‘).find(‘:checkbox‘).prop(‘checked‘,false);

}

</script>

</body>

</html>

时间: 2024-08-07 02:20:35

checkbox功能实现之全选、反选、取消的相关文章

jquery 全选 反选 取消 批量删除

首选引入jquery 全选 //全选 function myall(){ $("input[name='d[]']").each(function(index,e){ $(this).prop('checked',true); }); } 取消 //当true改为false时为取消 // function no(){ // $("input[name='d[]']").each(function(index,e){ // $(this).prop('checked'

全选反选取消-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

全选-反选-取消

1. .checked=false/true: 作用是给方形框勾上或者取消. checkbox.checked=true; 表示勾选上了. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none } .c1

全选反选取消

http://www.mamicode.com/info-detail-1466046.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .edit-mode{ padding:10px; } .editing{ padding:10px;

JavaScript之全选/反选/取消,for循环闭包

需求:table中要求点击红色单元格和点击checkbox的效果一样,最后一行点击就是全选.反选.取消选择的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ width: 400px; height: 15px; backgrou

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

JS 全选反选功能

全选按钮:<input type=\"checkbox\" id=\"cheSelectAll\" />选择</li>"); 选择项:<input name=\"chkItem\" type=\"checkbox\" value=\"" + this.ID + "\" /> //全选反选 $("#cheSelectAll"

JS对checkbox全选和取消全选

需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/> <input type="file" id="File1" name=&q

购物车计算总价、全选、取消

<script type="text/javascript" language="javascript"> function gouwu(obj){ var fruits=document.getElementByName("fruit"); var totalPrice=0; //遍历所有的checkbox,计算新的总价 for(var i=0;i<fruits.length;i++){ //判断是否选择 if(fruits[