进行单选的全选和反选

 <!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. spss缺失值填充步骤

    缺失值填充是数据预处理最基本的步骤,一般能想到的是固定值填充(均值等统计学方法).根据与本列有相关关系的列函数表示来填充.这次我用的是em算法进行填充,具体原理后续补充. 主要记录一下步骤: 工具栏: ...

  2. 7、LwIP协议规范翻译——网络接口

    7.网络接口 在lwIP中,物理网络硬件设备驱动是由类似于BSD网络接口结构表示.网络接口结构如图5所示.网络接口被保存在一个全局的链表中,通过结构体中的next指针来完成链表的链接. 每个网络接口都 ...

  3. linear-gradient常用实现效果

    之前也研究过css3的这个属性,感觉没什么大用,一般的开发不会用到,毕竟调出来的渐变不专业,不如找一个好看的图片,其实很多时候还是有用的,偷来三个例子. 一.控制虚线 一般写虚线都用dashed,但有 ...

  4. iDigital2019数字营销广告主峰会

    iDigital 数字营销品牌广告主峰会是定向邀请形式的闭门社交峰会, 现已成长为享誉亚洲的营销广告行业活动, 致力于帮助品牌营销官, 决策者和业界同行在日益整合的数字商业时代下获得战略远景.组委会邀 ...

  5. RocketMQ使用笔记

    apache rocketmq document : http://rocketmq.apache.org/community/ rocketmq 工具下载地址:https://github.com/ ...

  6. os.path.join

    os.path.join()函数: 第一个以”/”开头的参数开始拼接,之前的参数全部丢弃. 以上一种情况为先.在上一种情况确保情况下,若出现”./”开头的参数,会从”./”开头的参数的上一个参数开始拼 ...

  7. Angular4的依赖注入

  8. Axis2开发WebService客户端 的3种方式

    Axis2开发WebService客户端 的3种方式 在dos命令下   wsdl2java        -uri    wsdl的地址(网络上或者本地)   -p  com.whir.ezoffi ...

  9. np.meshgrid(）用法+ np.stack()用法

    A,B,C,D,E,F是6个网格点,坐标如图,如何用矩阵形式(坐标矩阵)来批量描述这些点的坐标呢?答案如下 这就是坐标矩阵——横坐标矩阵X XX中的每个元素,与纵坐标矩阵Y YY中对应位置元素,共同构 ...

  10. 处理centos6或者7依赖关系（Nginx、MySQL、PHP）的方法

     yum -y install make gcc gcc-c++ gcc-g77 flex bison file libtool libtool-libs autoconf kernel-devel  ...