<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

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

    </head>

    <body>

        <div id="checkBoxDiv1">

            测试单选框

            <input type="radio" name="checkBox1" class="checkBox1"><input type="radio" name="checkBox1" class="checkBox1" checked="checked">

        </div>

        <script type="text/javascript">

            $(".checkBox1").on("click", function(){

                var i = 0;

                var parentEle = $(this).parent();

                var index = $(this).index();

                $(".checkBox1").each(function(){

                    var currentEle = parentEle.children(".checkBox1:eq(" + i + ")");

                    if(i == index){

                        currentEle.attr("checked", true);

                    }else{

                        currentEle.attr("checked", false);

                    }

                    i++;

                });

                i = 0;

                $(".checkBox1").each(function(){

                    var currentEle = parentEle.children(".checkBox1:eq(" + i + ")");

                    alert(currentEle.attr("checked"));

                    i++;

                });

            });

        </script>

    </body>

</html>

这个是用来满足特殊需求的勾选一个单选按钮checked设置为true,其他的同name的单选框checked都设置为false.

JavaScript/JQuery radioButton(单选按钮)练习20190409的更多相关文章

  1. jquery判断单选按钮radio是否选中的方法

    JQuery控制radio选中和不选中方法总结 一.设置选中方法 复制代码代码如下: $("input[name='名字']").get(0).checked=true; $(&q ...

  2. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  3. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  4. javascript --- jQuery --- Deferred对象

    javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...

  5. javascript/jquery读取和修改HTTP headers

    javascript/jquery读取和修改HTTP headers jquery修改HTTP headers jQuery Ajax可以通过headers或beforeSend修改request的H ...

  6. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  7. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  8. 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  9. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. 转载：PowerPivot for excel 100 Create KPI

    PowerPivot for excel 100 Create KPI      最近在了解PowerPivot,遇到了一些问题,不过还好最近都解决了,下面介绍一下关于在PowerPivot里面如何创 ...

  2. ol 与ul 的区别

    1 <!DOCTYPE html> <html> <body> <ul> <li>咖啡</li> <li>牛奶< ...

  3. B. Chris and Magic Square

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  4. python学习笔记5-自定义函数

    1 自定义函数  (1)函数代码块以def关键字开头,然后函数标识符名称和圆括号  (2)任何传入参数和自变量必须放在圆括号中间.圆括号之间可以用于定义参数  (3)函数的第一行语句可以选择性的使用文 ...

  5. Android 实用技巧 --- 命令godir （转载）

    转自:http://blog.csdn.net/bigmarco/article/details/6995426 source build/envsetup.sh后可以使用很多android集成的sh ...

  6. 基于事件驱动机制，在Service Mesh中进行消息传递的探讨

    翻译 | 宋松 原文 | https://www.infoq.com/articles/service-mesh-event-driven-messaging 关键点 当前流行的Service Mes ...

  7. Codeforces 1000 (A~E)

    A Codehorses T-shirts 相同长度之间互相转化即可 #include<iostream> #include<cstdio> #include<cstri ...

  8. centos走一波

    Cpu 作为一个具有特定功能的芯片,里面含有微指令集 如果你想让主机进行什么特异的运算,就需要参考Cpu是否有相关内置的微指令集 才可以由于Cpu的工作主要在于 管理和运算 ,因此Cpu内又可以分为两 ...

  9. js实时获取并显示当前时间的方法

  10. pika消息中间件模块

    参考: http://www.rabbitmq.com/tutorials/tutorial-one-python.html http://www.rabbitmq.com/tutorials/tut ...