利用原生js和jQuery实现单选框的勾选和取消操作

原创 2016年08月30日 18:14:30

根据以下的Demo,大概就可以看的明白
Demo:

<html>
<head>
<script src='jquery-1.9.1.min.js'></script>
<script>
    window.onload = function(){
        var dom_a = document.getElementById('a1');
        var dom_b = document.getElementById("b1");
        //alert("A="+dom_a.value+" || B="+dom_b.value);
    }

    //以下开始操作radio的取消和勾选
    //原生js操作
    function fn1(){
        var dom_a = document.getElementById('a1');
        var dom_b = document.getElementById("b1");
        //勾选
        dom_a.checked = true;
        //dom_a.checked = 'false';
        //dom_a.checked = 123;
        //取消勾选
        dom_b.checked = '';
        //dom_b.checked = false;//取消勾选
        //dom_b.checked = null;//取消勾选
        //dom_b.checked = undefined;//取消勾选

    }
    //利用jQuery操作
    function fn2(){
        var jQ_a = $('#a2');
        var jQ_b = $("#b2");
        //勾选
        jQ_a.prop('checked','abc');
        //jQ_a.prop('checked','123');
        //jQ_a.prop('checked','true');
        //jQ_a.prop('checked',true);
        //jQ_a.prop('checked',123);//数字可以
        //jQ_a.prop('checked',-1);
        //jQ_a.prop('checked',abc);//会报错,abc未定义  {所以预猜测checked只要有已定义的值即可实现选中(undefined代表未定义)}
        //取消勾选
        jQ_b.prop('checked','');
        //jQ_b.prop('checked',false);
        //jQ_b.prop('checked',null);
        //jQ_b.prop('checked',undefined);//没有任何效果,不会报错
    }

</script>
<style>
    .own{
        border:solid 2px red;
        padding:20px 5px 20px 40px;
        width:300px;
        margin:80 0 0 500;
    }
</style>
<head>
<body>
<!--
    通过实验得知:
        初始化让单选框选中有4种方法可以实现:
        1、checked
        2、checked='checked'(建议用此方法,此方法对浏览器可以有很好的兼容性)
        3、checked='true'
        4、checked=true
        小提示:通过给checked属性复制,只要checked存在,
            赋予任何值都可以初始化选中(eg:checked='aaa' 或 checked='false')
            不赋值都可以实现初始化选中
        测试成功案例:
            [checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'],
            [checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1']

        当有多个被选中时,最后选中的单选框为最后一个
-->

<div class='own'>
<label>A1</label><input id='a1' type='radio' value='1' name='test1' checked />
<label>B1</label><input id='b1' type='radio' value='2' name='test1' checked='checked'/>
<label>C1</label><input id='c1' type='radio' value='3' name='test1' checked='true' />
<label>D1</label><input id='d1' type='radio' value='4' name='test1' checked=true />
<button onclick='fn1()'>测试点击一下</button>
</div>

<div class='own'>
<label>A2</label><input id='a2' type='radio' value='1' name='test2' />
<label>B2</label><input id='b2' type='radio' value='2' name='test2' checked/>
<label>C2</label><input id='c2' type='radio' value='3' name='test2' />
<label>D2</label><input id='d2' type='radio' value='4' name='test2' />
<button onclick='fn2()'>测试点击一下</button>
</div>

</body>
</html>

以上是本人自己测试的结果,用兴趣的可以copy实验一下。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js复选框变单选功能

function checkedThis(obj,cname){ var boxArray = document.getElementsByName(cname); //这里不需要加'...

js实现单选框的选择

整体功能:居住在海南选"是",则城市默认选择"海口";居住在海南选"否",则不选城市;如果居住在海南选择了"是",则城市选择除"海口"外的选择则弹出提示并选择海口,如果居住在海南选择了"否&...

Jquery操作单选框选中状态

前端开发中经常使用到单选框(radio)与多选框(checkbox)组件,需要对组件的状态进行设置和读取,下面看一段网上流行的操作代码: class="cb-container"> input typ...

使用js实现全选 单选 全部选

/ 思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选, // 把checkbox的checked设置为false即实现不选。3、通过if判断,...

通过js选中单选按钮

如何通过JS选中单选按钮,例如清空查询条件,单选按钮会xuan

jQuery实现遍历单选框

1、问题背景     有四个单选框,分别为一年四季,现在需要判断是否选中,如果选中这个单选框,就将其值赋值给输入框2、实现源码 遍历单选框 #result{ ...

Jquery单选按钮的赋值

$("input[name='sexy']").each(function(index, element) {             if($(this).val()==json_person.s.....

jquery根据特定的值设置 input type=radio 单选框为选中状态

$(".valLookBox input[name='agreeable']").each(function(){ if($(this).val() == result.status){ $(t...

使用jQuery实现单选框和复选框以及select

一、jquery实现单选框并选中value=”2”的项: html代码:1 2 3js代码实现:jQuery("input[ty
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)