jq CheckBox运用

最新推荐文章于 2024-08-14 11:55:10 发布

ulei520无量

最新推荐文章于 2024-08-14 11:55:10 发布

阅读量365

点赞数

分类专栏： jq 文章标签： jquery checkbox

本文链接：https://blog.youkuaiyun.com/fubaiguanjia/article/details/38895717

版权

jq 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.9.1.min.js"></script>

</head>
<body>
<table width="200" id="table1">
<tr>
<td><input type="checkbox" id="checkall" onClick="checkAll(this)"/></td>
<td>重量</td>
<td>运费</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<div>
<input type="button" id="txadd" value="新增"/>
<input type="button" id="txdel" value="删除"/>
<input type="button" id="ischk" value="全选"/>
<input type="button" id="isnochk" value="全不选"/>
<input type="button" id="nochk" value="反选"/></td>
</div>
</body>
<script>

$("#txadd").click(function(){
var chk="<input type='checkbox'/>";
var text1="<input type='text'/>";
var text2="<input type='text'/>";
var row="<tr><td >"+chk+"</td><td>"+text1+"</td><td>"+text2+"</td></tr>";
$("#table1").append(row);
})
function checkAll(evt){
$("#table1 :checkbox").each(function() {
$(this).attr("checked",evt.checked);
});
/*$("#table1 tr").find("input[type='checkbox']").each(function() {
$(this).attr("checked",evt.checked);
});*/
}

$("#txdel").click(function(){
$("#table1 tr").each(function() {
var chk=$(this).find("input[type='checkbox'");
if(chk.attr("id")!="checkall"){
if(chk.attr("checked")){
$(this).remove();
}
}
});
})

$("#ischk").click(function(){
$("#table1 :checkbox").attr("checked",true);
})
$("#isnochk").click(function(){
$("#table1 :checkbox").attr("checked",false);
})
$("#nochk").click(function(){
$("#table1 :checkbox").each(function() {
//$(this).attr("checked", !$(this).attr("checked"));
//这里js代码简单
this.checked=!this.checked;
});
})
</script>

</html>