分享知识-快乐自己：复选框全选/反选/获取值
Posted mlq2017
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分享知识-快乐自己：复选框全选/反选/获取值相关的知识，希望对你有一定的参考价值。
1）：复选框 全选与反选 、获取选中的值 取消选中的框
1、全选/反选
<body>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button id="btn">全选</button>
<button id="btn1">取消全选</button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$(":checkbox").attr("checked", true);
})
$("#btn1").click(function () {
$(":checkbox").attr("checked", false);
})
})
</script>
</body>
2、全选/反选
<body>
<div>
新闻<input type="checkbox"/><br/>
电影<input type="checkbox"/><br/>
音乐<input type="checkbox"/><br/>
娱乐<input type="checkbox"/><br/>
八卦<input type="checkbox"/><br/>
直播<input type="checkbox"/><br/>
</div>
<input type="checkbox" onclick="selectAll(this);" />全选/全取消<br/>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
function selectAll(checkbox) {
$(‘input[type=checkbox]‘).prop(‘checked‘, $(checkbox).prop(‘checked‘));
}
</script>
</body>
3、全选/反选
<form>
你爱好的运动是？<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/>
<input type="button" id="CheckAll" value="全选"/>
<input type="button" id="CheckNo" value="全不选"/>
<input type="button" id="CheckRev" value="反选"/>
</form>
<script>
$(function () {
$("#CheckAll").click(function () {
$("input:checkbox").prop("checked", "checked");
});
$("#CheckNo").click(function () {
$("input:checkbox").removeAttr("checked");
});
$("#CheckRev").click(function () {
$("input:checkbox").each(function () {
this.checked = !this.checked;
});
});
});
</script>
3、js获取复选框值
function chk(){ var obj=document.getElementsByName(‘test‘); //选择所有name="‘test‘"的对象，返回数组 //取到对象数组后，我们来循环检测它是不是被选中 var s=‘‘; for(var i=0; i<obj.length; i++){ if(obj[i].checked) s+=obj[i].value+‘,‘; //如果选中，将value添加到变量s中 } //那么现在来检测s的值就知道选中的复选框的值了 alert(s==‘‘?‘你还没有选择任何内容！‘:s); }
4、jQuery获取复选框值
function jqchk(){ //jquery获取复选框值
var chk_value =[];
$(‘input[name="test"]:checked‘).each(function(){
chk_value.push($(this).val());
});
alert(chk_value.length==0 ?‘你还没有选择任何内容！‘:chk_value);
}
以上是关于分享知识-快乐自己：复选框全选/反选/获取值的主要内容，如果未能解决你的问题，请参考以下文章