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);
} 轉載于:https://www.cnblogs.com/mlq2017/p/10121719.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)