进行单选的全选和反选

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>选择框</title>

         <script type="text/javascript">

             function checkAll(){   全选

                 var qxchecked=document.getElementById("qx").checked;

                 var noodle=document.getElementsByName("noodle");

                 for (var i = 0; i < noodle.length; i++) {

                     noodle[i].checked=qxchecked;

                 }

             }

             function checkNot(){    反选

                 var noodle=document.getElementsByName("noodle");

                 for (var i = 0; i < noodle.length; i++) {

                     noodle[i].checked=!noodle[i].checked;

                 }

             }

         </script>

     </head>

     <body>

         <input type="checkbox" id="qx" onclick="checkAll()">全选/全不选&nbsp;&nbsp;&nbsp;

         <input type="checkbox" id="fx" onclick="checkNot()">反选<br/>

         <input type="checkbox" name="noodle" value="1">兰州拉面<br/>

         <input type="checkbox" name="noodle" value="2">河南烩面<br/>

         <input type="checkbox" name="noodle" value="3">广州细蓉<br/>

         <input type="checkbox" name="noodle" value="4">陕西臊子面<br/>

     </body>

 </html>

利用jQuery实现全选和反选

1、全选

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>jquery_Demo6</title>

         <script type="text/javascript" src="js/jquery-1.8.2.js" ></script>

     </head>

     <body>

            <input type="checkbox" id="qx"  >全选/全不选 &nbsp; &nbsp;

            <input type="checkbox" id="fx" >反选

             <br>

            <input type="checkbox" name="noodle" value="1" >兰州拉面<br>

            <input type="checkbox" name="noodle" value="2" >河南烩面<br>

            <input type="checkbox" name="noodle" value="3"  >广州细蓉<br>

            <input type="checkbox" name="noodle" value="4"  >陕西噪子面<br>

            <input type="checkbox" name="noodle" value="5"  >康帅傅牛肉面<br>

     </body>

     <script type="text/javascript">

         //全选/全不选第一种：

     $(function(){

 //      $("#qx").click(function(){

 //          var flag=this.checked;

 //          $("input[name='noodle']").attr("checked",flag);

 //      });

         //第二种：

         $("#qx").click(function(){

             var flag=this.checked;

             var noodles=$("input[name='noodle']");

             noodles.each(function(){

 //                alert(this);//获取的数组中每一个对象

                 $(this).attr("checked",flag);

             });

         });

         //第三种：

         $("#qx").click(function(){

             var flag=this.checked;

             var noodles=$("input[name='noodle']");

             noodles.each(function(i,v){

                 //i数组的索引值 v就是this指当前对象

                 $(v).attr("checked",flag);

                 //$(v).prop("checked",flag); 也可以执行

             })

         });

         //反选

         $("#fx").click(function(){

             $("input[name='noodle']").each(function(){

                 var flag=$(this).prop("checked");

                 $(this).prop("checked",!flag);

             });

         });

       });

       </script>

 </html>

javaScript_Demo 全选和反选单选框的更多相关文章

  1. input单选框全选与反选

    input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. jQuery 实现复选框的全选与反选

    <script> //实现全选与反选 $(".allAndNotAll").click(function () { if ($(this).prop("che ...

  3. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  4. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 练习-checkbox 全选 ，反选， 单选，以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  7. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  8. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  9. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

随机推荐

  1. [vue]mvc模式和mvvm模式及vue学习思路(废弃)

    好久不写东西了,感觉收生疏了, 学习使用以思路为主, 记录笔记为辅作用. v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html v-show tem ...

  2. Ch02 控制结构和函数 - 练习

    1. 一个数字如果为正数,则它的signum为1:如果是负数,则signum为-1:如果是0,则signum为0.编写一个函数来计算这个值. scala> def signum(x:Int):I ...

  3. git基本操作及上传代码到gitHub

    1.基本配置: 配置用户名:git config --global user.name" "; 配置邮箱:git config --global user.email " ...

  4. tp5 model controlle sql

    model::::use think\Db 引用db库类 用于数据库之类use think\Model 引用模板use think\Cookie 引用传值 $rs=Db::name(‘表名’)-> ...

  5. linux 创建用户和添加到组

    1.添加用户 先用root用户登录 useradd -m testuser #这样的做会在/home下创建目录 2.指定shell #cat /etc/passwd  #查看用户指定shell roo ...

  6. [ Python ] unittest demo

    # -*- coding: utf-8 -*- import unittest class MyUT(unittest.TestCase): def test_1(self): print(" ...

  7. sublime lincense for linux

    sublime lincense for linux Sublime Text 3.x (after Build 3133) —– BEGIN LICENSE —–TwitterInc200 User ...

  8. UI自动化（五）dom

    获取标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // 直接获取标签   document.getEleme ...

  9. 【java】J2EE、J2SE和J2ME的区别

    本文向大家简单介绍一下J2EE.J2SE.J2ME概念及区别,J2EE,J2SE,J2ME是java针对不同的的使用来提供不同的服务,也就是提供不同类型的类库. Java2平台包括:标准版(J2SE) ...

  10. Scoket 服务器监听多个客户端发来的图片

    这是服务器 直接上代码 都有详细注释 注意线程需要自己手动关闭 不然程序会卡死 /* ######### ############ ############# ## ########### ### # ...