用过音乐播放器的人都知道有个全选按钮，如果使用Jquery实现，有个直接选中checked标签的方式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<input type="checkbox" name="check" id="" value="" />
<input type="checkbox" name="check" id="" value="" />
<input type="checkbox" name="check" id="" value="" />
<input type="checkbox" checked="checked" name="check" id="" value="" />
<input type="checkbox" checked="false" name="check" id="" value="" />
<input type="checkbox" name="check" id="" value="" />
<button class="submit" id="submit">全选</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var allLen = $("input[name='check']:checkbox").length; /* 所有的选项卡的长度 */
$(".submit").click(function(){
var checkedLen = $(":checked").length; /* 已被选中的长度 */
if (checkedLen < allLen) {
$("input[name='check']:checkbox").each(function(){
$(this).prop("checked", true);
})
}else{
$("input[name='check']:checkbox").each(function(){
$(this).prop("checked", false);
})
}
})
</script>
</html>
但是如果使用JavaScript，就只能遍历判断了。代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" checked="checked" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<button class="submit1" id="submit1">全选</button>
</body>
<script type="text/javascript">
var select1 = document.getElementById("submit1");
var checkboxs = document.getElementsByTagName("input"); select1.onclick = function(){
var num = 0;
for (k in checkboxs) {
if(checkboxs[k].checked){
num++;
}
}
if (num == checkboxs.length) {
for (var i = 0;i<checkboxs.length;i++) {
checkboxs[i].checked = false;
}
}else{
for (var i = 0;i<checkboxs.length;i++) {
checkboxs[i].checked = true;
}
}
}
</script>
</html>
小知识：Jquery中prop()和attr()相对于checkbox的区别(可见不能用attr()进行checked判断)
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" name="intersting" id="one" checked="checked" value=""/>
<button id="button">显示prop和attr获取的值</button>
<p class="prop"></p>
<p class="attr"></p>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#button").click(function(){
$(".prop").html("prop(): "+$("input[name='intersting']").prop('checked'));
$(".attr").html("attr(): "+$("input[name='intersting']").attr("checked"));
})
</script>
</html>