checkbox实现全选、反选 注意使用的是prop()而非attr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/test.js"></script> -->
<script type="text/javascript">
$(function() {
// 注意下面$(this) 同 $("当前HTML元素")，this不用引号圈起
$("#paraSlctAll").click(function() {
var flag = $(this).is(':checked');
//获取所有的复选框对象，即复选框中的所有选项
$("input[name ='paraCheckbox']").prop('checked', flag);
});
$("#smlSlctAll").click(function() {
var flag = $("#smlSlctAll").is(':checked');
//获取所有的复选框对象，即复选框中的所有选项
$("input[name ='smlCheckbox']").prop('checked', flag);
});
/*而且还实现了:当其中不勾选某一个选项的时候,则去掉全选复选框
选取type="checkbox" name ="paraCheckbox" 的<input>元素 其实也可用$("input[name ='paraCheckbox']")来代替$(":checkbox[name='paraCheckbox']")*/
$(":checkbox[name='paraCheckbox']").click(function(){
/*判断复选框选项个数是否等于当前被勾选中的选项个数，若个数相等，则flag=true ，则全选选项也显示被选择；若个数不等，则flag=false, 则全选选项显示未被勾选*/
var flag = $(":checkbox[name='paraCheckbox']").length==$(":checkbox[name='paraCheckbox']:checked").length
$("#paraSlctAll").prop('checked',flag);
});
$(":checkbox[name='smlCheckbox']").click(function(){
var flag = $(":checkbox[name='smlCheckbox']").length==$(":checkbox[name='smlCheckbox']:checked").length
$("#smlSlctAll").prop('checked',flag);
});
});
</script>
</head>
<body>
<fieldset>
<legend>paraCheckbox</legend>
<form id="paraFrm" method="post" action="">
<input type="checkbox" id="paraSlctAll"><strong>select all / unselected all</strong>
<br>
<input type="checkbox" name="paraCheckbox" value="checkbox1">WIND
<input type="checkbox" name="paraCheckbox" value="checkbox2">WDIR
<input type="checkbox" name="paraCheckbox" value="checkbox3">SWELL
<input type="checkbox" name="paraCheckbox" value="checkbox4">SWPER
<br>
<!-- 在onclick事件中调用js函数 -->
<button type="submit" value="提交" onsubmit="paraChk()">submit</button>
<button type="reset" value="重置" onreset="paraClr()">reset</button>
</form>
</fieldset>
<br>
<!-- 相似性准则smilarity criteria复选框 -->
<fieldset>
<legend>smlCheckbox</legend>
<form id="smlFrm" method="post" action="">
<input type="checkbox" id="smlSlctAll"><strong>select all / unselected all</strong>
<br>
<input type="checkbox" name="smlCheckbox" value="checkbox8">spatial overlap
<input type="checkbox" name="smlCheckbox" value="checkbox5">max
<input type="checkbox" name="smlCheckbox" value="checkbox6">min
<input type="checkbox" name="smlCheckbox" value="checkbox7">stdev
<input type="checkbox" name="smlCheckbox" value="checkbox8">mean
<br>
<button type="submit" value="提交" onsubmit="smlChk()">submit</button>
<button type="reset" value="重置" onreset="smlClr()">reset</button>
</form>
</fieldset>
<br>
<br>
<select onchange="">
<option value="">---请选择时刻---</option>
<optgroup label="time"></optgroup>
<option value="one">d100</option>
<option value="two">d106</option>
<option value="three">d112</option>
<option value="four">d118</option>
<option value="five">d200</option>
</select>
</body>
</html>
2318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
