进行单选的全选和反选

 <!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. EasyUI实现分页、搜索、行按钮功能

    1.html+js代码: <html> <head> <meta name="viewport" content="width=device ...

  2. μCOS-II移植 - 基于CortexM3

    μCOS-II是一个经典的RTOS. 任务切换对于RTOS来说是最基本也是最核心的部分,除此之外还有任务调度算法. 先来看看基于stm32f107的任务切换代码: ;***************** ...

  3. 小程序 切换到tabBar页面不刷新问题

    小程序跳转的几种方式有wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab等.下面我们重点研究切换到tabBar的两种方式. wx.switchTa ...

  4. Key in_hidden/batch_normalization/beta not found in checkpoint

    可能原因:不同参数的结果保存到了同一文件夹下 解决方法:不同参数结果放在不同的checkpoints tf.train.Saver().save(sess, self.checkpoint_dir + ...

  5. Sitecore系统教程即时查阅编辑内容

    实时模式中的Sitecore 作为开发人员,我们经常需要在本地环境中使用代码和内容.在本地,能够立即看到任何内容更改,以节省时间和提高效率是有意义的.这是在实时模式下运行Sitecore.默认情况下, ...

  6. 虚拟机centos7配置本地yum源

    在虚拟机中要使用yum命令,就要先配置一下yum源,下面就分享一下这个过程: 1. 挂载iso到vmware,首先得确保CD/DVD连接到镜像.可以这样操作 2. 执行下面的命令 # mkdir /m ...

  7. ACM总结——2017ACM-ICPC北京赛区现场赛总结

    现在距离比赛结束已经过了一个多星期了,也是终于有时间写下心得了.回来就是被压着做项目,也是够够的. 这次比赛一样是我和两个学弟(虽然是学弟,但我的实力才是最弱的T_T)一起参加的,成绩的话打铁,算是情 ...

  8. Reading Lines from File in C++

    Reading Lines from File in C++ In C++, istringstream has been used to read lines from a file. code: ...

  9. UI自动化（十）selenium定位

    浏览器操作   1 2 3 4 5 6 7 8 # 刷新 driver.refresh()   # 前进 driver.forward()   # 后退 driver.back() 获取标签元素   ...

  10. [C++ Primer Plus] 第7章、函数（一）程序清单——递归，指针和const，指针数组和数组指针，函数和二维数组

    程序清单7.6 #include<iostream> using namespace std; ; int sum_arr(int arr[], int n);//函数声明 void ma ...