checkbox操作

2018-06-27 09:04:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="btnq">
<input type="checkbox" id="btnq" class="btnQ"/>全选</label>
<button class="del">删除</button>
<button class="queren">确认</button>
<button class="btnHZ">获取选中的值</button>
<div>
<label for="userName">
<input type="checkbox" id="userName" name="test" class="cb_fruit" value="1"/>userName
</label>
<label for="userPhone">
<input type="checkbox" id="userPhone" name="test" class="cb_fruit" value="2"/>userPhone
</label>
<label for="userAddress">
<input type="checkbox" id="userAddress" name="test" class="cb_fruit" value="3"/>userAddress
</label>
<label for="userSize">
<input type="checkbox" id="userSize" name="test" class="cb_fruit" value="4"/>userSize
</label>
<label for="userColer">
<input type="checkbox" id="userColer" name="test" class="cb_fruit" value="5"/>userColer
</label>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function () {

//获取选中的值
var intName = document.getElementsByName("test");
$(".btnHZ").click(function () {
intVal()
});
function intVal(){
var intArr = [];
for (k in intName) {
if (intName[k].checked) {
intArr.push(intName[k].value)
}
}
console.log(intArr)
}
//确认
$(".queren").click(function () {
if ($("input[name='test']:checked").length == 0) {
alert("请选中信息")
}else{
intVal();
}

});
//全选和反选
$(".btnQ").click(function () {
$("input[name='test']").prop("checked", this.checked);
});
/*挨个选完选中后全选选中,取消一个选中全选取消选中*/
$(".cb_fruit").change(function () {
if ($("input[name='test']:checked").length == $(".cb_fruit").length) {
$("#btnq").prop("checked", true);
} else {
$("#btnq").prop("checked", false);
}
});

//删除
$(".del").click(function () {
if ($("input[name='test']:checked").length == 0) {
alert("请选中删除项")
} else {
$("div input").each(function () {
if ($(this).is(':checked')) {
$(this).remove();
}
})
}
});
})
</script>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:最近实际项目中遇到的技术问题与解决思路

下一篇:react学习(四)之设置 css样式 篇