进行单选的全选和反选

 <!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. openstack--部暑

    ##1.Centos7环境准备-- openstack pike ##1.Centos7环境准备-- openstack pike [https://blog.csdn.net/shiyu115775 ...

  2. Oracle启动关闭

    启动: [oracle@oracleSigle ~]$ sqlplus / as sysdba   SQL*Plus: Release 11.2.0.1.0 Production on Wed Nov ...

  3. Jmeter学习之-获取登录的oken值（1）

    ps: 这里只着重讲述如何实时获取其他接口返回的值,作为此次接口的参数传递,添加接口请求的相关不再详述,可查看上一篇文章 为了方便管理,此处将:登录接口单独放在一个线程组下面,需要使用登录接口返回的t ...

  4. React之ant design的table表格序号连续自增

    render(text,record,index){     return(       <span>{(pagination.current-1)*10+index+1}</spa ...

  5. 记录下diagwait的问题

    对于Oracle集群,有关diagwait的解释可以很容易在网上搜到: 该问题只会出现在ORACLE 11.2 以前版本中,在 11G R2版本中,diagwait的值默认配置为13. 而针对11.2 ...

  6. 【Spark-core学习之六】 Spark资源调度和任务调度

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  7. 【javascript】script标签的async异步解析

    <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染 ...

  8. 杂谈迁移tomcat项目到docker，以及遇到的问题

    1.迁移tomcat项目异常简单,下一个tomcat的container,然后直接把webapps放进去就行了. #tomcat版本随原始项目版本而变,具体版本列表查看:https://hub.doc ...

  9. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

  10. jQuery 查找属性

    jQuery 查找属性 示例: <div xsk='123' > <div xsk='456' > // 具有xsk属性的所有标签 $('[xsk]') // xsk属性等于1 ...