HTML复选框实现 全选 反选 全不选的 简单小实例

最新推荐文章于 2022-10-20 10:32:06 发布
最新推荐文章于 2022-10-20 10:32:06 发布
阅读量773 收藏
点赞数 2
分类专栏： 2019.3 文章标签： 复选框

 

 

<html>
 <head>
  <title>HTML</title>
  <style type="text/css">
 
  </style>
 </head>
 <body>
   <input type="checkbox" id="boxid" οnclick="selectAllorNo();" />全选/全不选
   
   <br/>
   <input type="checkbox" name="love"/>看书     <br/>
   <input type="checkbox" name="love"/>写字     <br/>
   <input type="checkbox" name="love"/>看电视   <br/>
   <input type="checkbox" name="love"/>听音乐   <br/>
   <input type="checkbox" name="love"/>打游戏   <br/>
   <input type="checkbox" name="love"/>爱晓权   <br/>
   <br/>
   <input type="button" value="全选"   οnclick="selectAllOrNot(true);"/>
   <input type="button" value="全不选" οnclick="selectAllOrNot(false);"/>
   <input type="button" value="反选"   οnclick="selectOthers();"/>
   <script type="text/javascript">
     //实现全选或者全不选复选框的操作
     function selectAllorNo(){
       //获取所有复选框的对象集  
       var boxid=document.getElementById("boxid");
       // 当鼠标点击按钮时 点击状态发生改变后 在执行此方法  因此 这里的判断应该为
       // 如果复选框为true 说明之前是false  需要全选   反之 全不选   
       if(boxid.checked==false){
         selectAllOrNot(false);
       }else{
         selectAllOrNot(true);
       }
     }
 
 
      //实现全选按钮 和 全不选按钮的操作
      function selectAllOrNot(bool){
       //获取name=love 的对象集  一个name可以对应多个元素  所有没有getElementByName()这个方法
       var loves=document.getElementsByName("love");
       //获取id=boxid 的对象集   一个id只能对应一个元素  所有没有getElementsById()这个方法
       var boxid=document.getElementById("boxid");
       //将复选框设置为不选
       boxid.checked=bool;
       for(var i=0;i<loves.length;i++){
           loves[i].checked=bool;
       }
     }
       //实现反选的操作
      function selectOthers(){
       //获取所有复选框的对象集  
       var loves=document.getElementsByName("love");
       var boxid=document.getElementById("boxid");
       if(boxid.checked==true){boxid.checked=false}
       else{boxid.checked=true}
       for(var i=0;i<loves.length;i++){
           if(loves[i].checked==true){loves[i].checked=false}
           else{loves[i].checked=true}
       }
       
     }
 
    </script>
 
 </body>
</html>

dingbin_1024
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML DOM实现全选，全不选，反选功能
weixin_55650421的博客
06-04 2765
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { width: 80%; border: 1px solid #69c; border-collapse: collapse; margin: 10px auto; }.
html复选框的全选和全不选
qq_38409944的博客
05-17 1万+
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script&amp;gt; function checkAll(){ //1.获取编号前面的复选框 var checkAllEle = document.getElement
HTML中的select下拉框内容显示不全的解决办法
jrrfgj的博客
02-19 1457
HTML中的select下拉框内容显示不全的解决办法
js html复选框的全选和非全选
fugyuan000887的专栏
02-24 1777
<br />JS代码：<br />//设置复选框的全选的单击事件<br />function selectChk(ParentChkID, ChildChkName) {<br />//全选和取消全选操作<br />    $("#" + ParentChkID + "").click(function() {<br />        if ($(this).attr("checked") == true) { // 全选<br />            $("input[name='" + Child
HTML实现全选，全不选，反选功能。
weixin_44486478的博客
06-05 838
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>p177作业</title> </head> <body> <table> <tr&g...
在点餐过程中用 JavaScript + HTML 实现，全选按钮 和 反选按钮 的操作与功能
狮子座的男孩
06-14 1191
Ⅰ、问题描述： 1、用JavaScript + html实现，全选按钮 和 反选按钮 的操作和功能； 2、分析： A、用 html 做出全选按钮、反选按钮、待选菜的格式； B、用 JavaScript 的 DOM 操作实现全选按钮和反选按钮的功能； C、用DOM操作实现，全选待选菜以及在反选情况下全选待选菜后的，全选按钮自动被选上的操作； Ⅱ、实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> <html lang="en"> &
HTML复选框全选，全部选，反选案例
CoderJu的博客
09-26 2490
这是基于html的一个简单的复选框的全选和全不选和反选案例，代码如下：<html> <head> <title>Document</title> </head> <body> <input type="checkbox" name = "sport"/>跑步<br/> <input type="checkbox" name = "sport"/>游泳<br/>
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript web前端大二实训大作业
qq_365392777
09-26 1万+
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平
html表单全选框,form表单里如何实现全选和全不选
weixin_35713476的博客
06-03 1652
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。javascript实现全选和全不选效果：1、首先你需要了解input标签中复选框。当该复选框被选中时，调用该元素checked属性的值为true。这一点是我们利用js实现该效果的第一个要点。2、全选：当鼠标点击全选这个复选框时，调用函数allSelet(...
HTML复选框的全选、全不选以及单选操作。
娜可璐璐的博客
08-05 5686
今天在进行HTML的table练习的时候，发现一个比较有趣的知识点，有关于复选框的全选、全不选，以及单选操作的相关问题。 待我上网搜索了一下相关资料，发现有关于全选以及全不选的详解还是挺多的，但是复选框与全选的联动却很少有人解释。 接下来我就先和大家说说全选以及全不选的相关代码分享。 function checkAll(){ //1.获取编号前面的复选框 var checkAllEle = document.getElementById("bo
Html：实现checkbox全选、非全选、单选
stay hungry ! stay foolish!
11-09 2998
                    Html：实现checkbox全选、非全选、单选   全局选择与单选有以下两点关系： 1、当我把所有单选都选择上的时候，全选应该是被选择状态 2、当我取消一个单选时，全选应该是取消的状态 3、点击全选按钮，所有的单选都被选上；取消全选按钮，所有的单选都被取消 一个很简单的功能，那就直接代码实现了吧 jsp的代码： &lt;table class=...
html实现选择框的全选与反选
最新发布
fzxyxf1314的博客
10-20 1538
html中的全选和反选功能的实现
复选框的全选、全不选和反选
weixin_57762552的博客
04-19 4116
如图： 整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。 HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。 接下来就是本篇文章的重点，JavaScript部分。 按照惯例首先要获取到所有...
HTML实现全选，全不选
热门推荐
qq_42611148的博客
08-23 1万+
代码如下： &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; td{ border: 1px solid rebeccapurple;
html 实现全选与取消全选
丿灬安之若死
07-25 1589
这个组件 <th class="col-1 col-lg-1 col-md-1 col-xs-1">批量选中/取消 <input type="checkbox" id="feedback_ids_all" onclick="changeClickStat...
html页面全选全不选,全选与全不选.html
weixin_31147827的博客
06-03 511
.top a{color: #000000;text-decoration: none;}.top{border-bottom: 1px solid;/* font-size: 12px; */}.box{width: 110px;border: 1px solid;height: 330px;margin: 100px auto;}.bottom{}.bottom label{width: 10...
html中实现选项的全反选,js实现复选框的全选、全不选和反选
weixin_39637589的博客
06-19 702
js实现复选框的全选、全不选和反选主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态实现代码复选框的选择#btn{margin: 5px auto;}#btn>input{font-size: 16px;color: #fff;background-color: rgb(110, 34, 182);outline: none;...
HTML中复选框的全选与反选
weixin_49702090的博客
09-24 788
1、引入jQuery —— jquery.js 注意：低版本的js文件可能导致第二次全选不上。 2、全选操作 onchange 事件：表单状态发生改变时触发。 <input type="checkbox" id="qx" name="qx" onchange="a()" />全选 function a(){ if ($("#qx").is(":checked")) { $(":checkbox").each(function() { $(this).prop("checked
原生js实现全选、反选、不选的小练习
几百块的博客
05-17 285
js实现，主要改变checked的值true、false的值来实现对爱好的全选、反选、不选， 附加： 当所有单选按钮都勾选时，全选按钮也会随之勾选； 当所有单选按钮都没勾选时，不选按钮也会随之勾选； 只要有一个按钮被选中，全选按钮勾选取消； 只要有一个按钮没被选中，不选按钮勾选也会取消 详细介绍在代码中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit
jq多选框全选，全不选，有一个不选则全选取消
darkCloudss的博客
11-11 858
<!DOCTYPE html> <html> <head> <title>多选框全选，全不选，有一个不选则全选取消</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script> </head...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值