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

来源：互联网发布：linux 清除文件空行编辑：程序博客网时间：2024/06/05 05:55
根据以下的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实验一下。
1 0