进行单选的全选和反选

 <!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. MVC中code first方式开发，数据库的生成与更新

    在使用EF的实际编程中我们经常遇到这样的问题:发现实体结构需要新增加一个字段,或者减少一个字段,急需把实体结构修改,并让数据库更新这种修改.在用Model First或者Database First的 ...

  2. python框架之Django(10)-Form组件

    介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来.与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入 ...

  3. Cartographer源码阅读(8)：imu_tracker

    IMU的输入为imu_linear_acceleration 和  imu_angular_velocity 线加速和角速度.最终作为属性输出的是方位四元数.  Eigen::Quaterniond ...

  4. openshift 容器云从入门到崩溃之九《容器监控-报警》

    容器状态监控 主要是监控POD的状态包括重启.不健康等等这些k8s api 状态本身会报出来,在配合zabbix报警 导入zabbix模板关联上oc master主机 <?xml version ...

  5. node获取windows pc 机器的标示

    var exec = require('child_process').exec; if(process.platform != "win32"){ //window throw ...

  6. Eclipse安装fatjar（不用自己下载fatjar包）

    .安装Eclipse-jee-luna-SR2-win32-x86_64版本的插件支持 方法如下: Help -> Install New Software... -> Work with ...

  7. 027-Session状态提供程序

    Session分三种:1.InProc(进程内)-默认就是这种-速度快/但内存小/易丢失进程外:可以在IIS或ASPNET服务意外关闭时继续保持状态,注意此时存储到session中的对象必须支持序列化 ...

  8. sitecore开发入门Sitecore的CRUD操作 - 第一部分

    在本文中,讨论如何使用Sitecore.Data.Items.Item并对这些项执行CRUD(创建,读取,更新和删除)操作.我还将介绍如何使用Glass和Fortis类库进行相同的操作,这些操作都是对 ...

  9. Android开发中使用Intent跳转到系统应用中的拨号界面、联系人界面、短信界面

    现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 首先,我们先看拨号界面,代码如下: Intent intent =new Intent(); intent. ...

  10. Oracle数据库管理----性能优化

    https://blog.csdn.net/yzllz001/article/details/54848513 数据库访问优化法则   要正确的优化SQL,我们需要快速定位能性的瓶颈点,也就是说快速找 ...