<!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. 数据库sql互转（oracle转mysql为例子）

    转自: https://blog.csdn.net/sinat_32366329/article/details/76402059 在PowerDesinger里找到 File -->> ...

  2. WebService安全解决方案—简单握手协议

    具体方案如下图: 2.解决方案分析 A.SiteA每次向SiteB发送的请求参数都不一样,造成伪造者难以模仿和推敲里面的算法过程. B.伪造者获得了SayHelloRequest的数据,它向SiteB ...

  3. fileupload简单使用

    form.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  4. Node.js之网游服务器实践

    此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 随着Node.js的不断发展与壮大,应用范围也越来越广泛,从传统的企业应用,到互联网使用,再到云计算的发展, ...

  5. CSA Round #50 (Div. 2 only) Min Swaps（模拟）

    传送门 题意 给出一个排列,定义\(value为\sum_{i=1}^{n-1}abs(f[i+1]-f[i])\) \(swap(a[i],a[j])(i≠j)为一次交换\),询问最少的交换次数使得 ...

  6. csacademy Round #36(模拟+最坏情况)

    传送门 题意 给出n种袜子,每种袜子个数a[i],两只相同种类袜子配成一对,询问至少拿出多少只袜子能确保配出k对袜子 分析 In order to find out the minimum numbe ...

  7. AT2534 港湾設備 (Port Facility)

    洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...

  8. Web | 解决中文乱码

    设定文件的编码格式在head中添加 <head> <meta http-equiv="Content-Type" content="text/html; ...

  9. Generating Palindromes LightOJ - 1033

    Generating Palindromes LightOJ - 1033 题意:添加最少的字符使得给出的字符串成为回文串.输出添加的字符数. 方法:常规区间dp.ans[i][j]表示使得ans[i ...

  10. EJB Timer Service is not available. Timers for application with id 95795415990861824 will not be deleted

    delete follows:glassfish\domains\domain1\applications\ejb-timer-service-appglassfish\domains\domain1 ...