HTML复选框的全选、全不选以及单选操作。

今天在进行HTML的table练习的时候，发现一个比较有趣的知识点，有关于复选框的全选、全不选，以及单选操作的相关问题。
待我上网搜索了一下相关资料，发现有关于全选以及全不选的详解还是挺多的，但是复选框与全选的联动却很少有人解释。
接下来我就先和大家说说全选以及全不选的相关代码分享。

function checkAll(){//1.获取编号前面的复选框var checkAllEle = document.getElementById("box");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//7.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//8.拿到每一个复选框，并将其状态置为未选中checkOnes[i].checked=false;}}}

附图如下

以上是有关于全选和全不选的相关源代码以及相对应的代码注释。通过这个方法，我们可以在点击全选按钮的时候分别实现全选以及全不选的情况。
然后接下来就和大家分享全选复选框和其他复选框的联动。

function check(){//1.获取编号前面的复选框var checkOnes = document.getElementsByName("checkOne");//2.设置一个计数器var a=0;//3.获取全选框的状态var checkAllEle = document.getElementById("box");//4.获取下面所有的复选框for(var i=0;i<checkOnes.length;i++){//5.如果复选框的状态是未选中if(checkOnes[i].checked==false){//6.设置全选框的状态为未选中checkAllEle.checked=false;//7.执行完毕关闭循环break;}//8.如果循环条件不成立，计数器加一a++;}//9.判断计数器是否与复选框的的数量相等if(a==checkOnes.length){//10.如果相等则设置全选框的状态为已选中checkAllEle.checked=true;}}

附图如下

通过这个方法，我们可以实现复选框和全选框的联动，复选框没有全部选中时，全选框就不会被选中，若复选框全部被选中，那么相对应的，全选框就会自动选中。
最后吧整个文件的源码一并分享，希望能帮助到爱学习的你！

<html><head><meta charset="utf-8" /><script>function checkAll(){//1.获取编号前面的复选框var checkAllEle = document.getElementById("box");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//7.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//8.拿到每一个复选框，并将其状态置为未选中checkOnes[i].checked=false;}}}function check(){//1.获取编号前面的复选框var checkOnes = document.getElementsByName("checkOne");//2.设置一个计数器var a=0;//3.获取全选框的状态var checkAllEle = document.getElementById("box");//4.获取下面所有的复选框for(var i=0;i<checkOnes.length;i++){//5.如果复选框的状态是未选中if(checkOnes[i].checked==false){//6.设置全选框的状态为未选中checkAllEle.checked=false;//7.执行完毕关闭循环break;}//8.如果循环条件不成立，计数器加一a++;}//9.判断计数器是否与复选框的的数量相等if(a==checkOnes.length){//10.如果相等则设置全选框的状态为已选中checkAllEle.checked=true;}}</script></head><body><table style="text-align:center;" width="600" border="1" cellspacing="0" cellpadding="0" id="main"><form action="" method="post"><tr><td><input type="checkbox" id="box" onclick="checkAll()" />全选</td><td>产品名称</td><td>价格（元）</td><td>数量</td></tr><tr><td><input type="checkbox"  onclick="check()" name="checkOne"/></td><td>诺基亚N95手机</td><td>2589</td><td>6</td></tr><tr><td><input type="checkbox"  onclick="check()" name="checkOne"/></td><td>佳能数码相机</td><td>1865</td><td>5</td></tr><tr><td><input type="checkbox"  onclick="check()" name="checkOne" /></td><td>戴尔新版键盘</td><td>60</td><td>56</td></tr><tr><td><input type="checkbox"  onclick="check()" name="checkOne"/></td><td>联想折叠式笔记本电脑桌</td><td>59</td><td>10</td></tr><tr><td><input type="checkbox" id="box5" onclick="check()" name="checkOne"/></td><td>康佳32寸液晶电视</td><td>2945</td><td>3</td></tr><tr><td><input type="checkbox" id="box6" onclick="check()" name="checkOne"/></td><td>九阳五谷系列豆浆机</td><td>299</td><td>8</td></tr><tr><td colspan="5" style="height:35px;"><input name="fulls" type="button"   value="删除选中产品"/></td></tr></form>
</table></body>
</html>

友情提示：最后的删除按钮没有添加点击事件。

HTML复选框的全选、全不选以及单选操作。相关推荐

复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
html5判断多选框是否选择的函数,复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
下拉列表与多选框以及GridView中的多选框的问题
小丫头的随笔... 页面设计中有一个下拉列表(DropDownList)和多选框列表(CheckBoxList)以及一个可以提供显示的表格(GridView).当选择下拉列表中具体的值时,进行对多选框 ...
【PHPWord】如何解决PHPWord的输出checkbox复选框并设置checked已勾选
目录一.需求二.基于XML的实现方式三.兼容性强的实现方式三.总结一.需求对于生成Word文档来说,复选框的勾选状态和非勾选状态的展示是一个非常常见的问题. 需要用到复选框的文档大概有这几 ...
帆软复选框根据数据库值显示勾选效果
1.经过测试,帆软8.0,sql编辑框里面展示"勾选复选框"字体图标无法正常展示,不展示或者展示问号 2.解决办法步骤一.自定义字典前要修改fineReport的字符集参考:h ...
el-checkbox多选框点击第一次不能勾选，第二次才会勾选
点击第一次的时候没有变化,仔细看只多选框的外边框有一点点变色,但是没有出现勾号,第二次点击的时候才会出现勾号. v-model绑定的值必须是布尔值!!! <el-checkbox v-model ...
checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发
<input type="checkbox" οnclick="checkboxOnclick(this)" /><script>fun ...
html复选框控制元素禁用,如何勾选复选框时禁用HTML必需属性？
你的问题的工作示例: HTML: Same as account name fname lname age address city 的Javascript: $(document).ready(fu ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...

HTML复选框的全选、全不选以及单选操作。

HTML复选框的全选、全不选以及单选操作。相关推荐

最新文章

热门文章