利用原生js和jQuery實現單選框的勾選和取消操作

根據以下的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實驗一下。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章