有一组15选项的多选框，分别是数字1-14与 无，怎样实现点无1-14全部都被取消选
中，然后在点1-14之间任意一个无就会被取消
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
<input type="checkbox" name="a1" value="1">1<br>
<input type="checkbox" name="a2" value="2">2<br>
<input type="checkbox" name="a3" value="3">3<br>
<input type="checkbox" name="a4" value="4">4<br>
<input type="checkbox" name="a5" value="5">5<br>
<input type="checkbox" name="a6" value="6">6<br>
<input type="checkbox" name="a7" value="7">7<br>
<input type="checkbox" name="a8" value="8">8<br>
<input type="checkbox" name="a9" value="9">9<br>
<input type="checkbox" name="a10" value="10">10<br>
<input type="checkbox" name="a11" value="11">11<br>
<input type="checkbox" name="a12" value="12">12<br>
<input type="checkbox" name="a13" value="13">13<br>
<input type="checkbox" name="a14" value="14">14<br>
<input type="checkbox" name="null" value="">无<br>
</div>
<script type="text/javascript">
$(function(){
$(".box input[name^=a]").change(function(event){
$(".box input[name=null]").prop("checked",false);
});
$(".box input[name=null]").change(function(event){
$(".box input[name^=a]").prop("checked",false);
});
});
</script>
});
把name全改一样的 都是 a1
多加一个全选框
onclick="changecheckBox(this.checked);">
写单击事件：
function changecheckBox(check) {
$("input[name='a1']").attr("checked", check);
}
name需要相同的话，可以用class选择元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> 页面名称 </title>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
<input type="checkbox" class="text" name="a" value="1">1<br>
<input type="checkbox" class="text" name="a" value="2">2<br>
<input type="checkbox" class="text" name="a" value="3">3<br>
<input type="checkbox" class="text" name="a" value="4">4<br>
<input type="checkbox" class="text" name="a" value="5">5<br>
<input type="checkbox" class="text" name="a" value="6">6<br>
<input type="checkbox" class="text" name="a" value="7">7<br>
<input type="checkbox" class="text" name="a" value="8">8<br>
<input type="checkbox" class="text" name="a" value="9">9<br>
<input type="checkbox" class="text" name="a" value="10">10<br>
<input type="checkbox" class="text" name="a" value="11">11<br>
<input type="checkbox" class="text" name="a" value="12">12<br>
<input type="checkbox" class="text" name="a" value="13">13<br>
<input type="checkbox" class="text" name="a" value="14">14<br>
<input type="checkbox" class="null" name="a" value="无">无<br>
</div>
<script type="text/javascript">
$(function(){
$(".text").change(function(event){
$(".null").prop("checked",false);
});
$(".null").change(function(event){
$(".text").prop("checked",false);
});
});
</script>
</body>
</html>
//纯js和html代码
<!DOCTYPE html>
以前做的小练习，参考一下
javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<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="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
*/
var $checkedAllBox = $('#checkedAllBox')
var $items = $(':checkbox[name=items]')
// 1. 点击'全选': 选中所有爱好
$('#checkedAllBtn').click(function () {
$items.prop('checked', true)
$checkedAllBox.prop('checked', true)
})
// 2. 点击'全不选': 所有爱好都不勾选
$('#checkedNoBtn').click(function () {
$items.prop('checked', false)
$checkedAllBox.prop('checked', false)
})
// 3. 点击'反选': 改变所有爱好的勾选状态
$('#checkedRevBtn').click(function () {
$items.each(function () {
this.checked = !this.checked
})
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
//4. 点击'提交': 提示所有勾选的爱好
$('#sendBtn').click(function () {
$items.filter(':checked').each(function () {
alert(this.value)
})
})
// 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
$checkedAllBox.click(function () {
$items.prop('checked', this.checked)
})
// 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$items.click(function () {
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
</script>
</body>
</html>
给那哥‘无’添加一个点击事件就行，在触发的函数中添加一个取消复选框全选的功能。可以参考：https://blog.csdn.net/hu_belif/article/details/80907771
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/全选全不选.js"></script>
</head>
<body>
<div align="center">
<table border="2">
<tr>
<th>全选<input type="checkbox" id="all" onclick="checkAll(this.checked)"/></th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<tr>
<td><input type="checkbox" name="one" onclick="checkOne()"/></td>
<td>苹果</td>
<td>2.50</td>
</tr>
<tr>
<td><input type="checkbox" name="one" onclick="checkOne()"/></td>
<td>电视</td>
<td>9999.00</td>
</tr>
<tr>
<td><input type="checkbox" name="one" onclick="checkOne()"/></td>
<td>航母</td>
<td>1000000000.00</td>
</tr>
</table>
</div>
</body>
</html>
/**
* Created by Administrator on 2018/6/19.
*/
//所有name为one的元素的checked属性的值与flag相同
function checkAll(flag){
var one = document.getElementsByName("one");
for(var i=0;i<one.length;i++){
one[i].checked = flag;
}
}
//只要name为one的元素中有一个未选中，则all元素的checked为false
function checkOne(){
var one = document.getElementsByName("one");
var all = document.getElementById("all");
all.checked = true;
for(var i=0;i<one.length;i++){
if(one[i].checked==false){
all.checked = false;
}
}
}
$("input[name='a']").bind("click",function(){
var a=document.getElementsByName("a");
// alert($(this).attr("id"));
if($(this).attr("id")=="无的id"){
for(i=a.length-2;i>=0;i--)
{
a[i].checked=false;
}
}else{
a[a.length-1].checked=false;
}
});
/**
a[a.length-1]是无
*/