快捷導(dǎo)航

利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法

更新時(shí)間：2016年09月04日 09:56:17 投稿：jingxian

下面小編就為大家?guī)?lái)一篇利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

根據(jù)以下的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);//數(shù)字可以
    //jQ_a.prop('checked',-1);
    //jQ_a.prop('checked',abc);//會(huì)報(bào)錯(cuò),abc未定義 {所以預(yù)猜測(cè)checked只要有已定義的值即可實(shí)現(xiàn)選中(undefined代表未定義)}
    //取消勾選
    jQ_b.prop('checked','');
    //jQ_b.prop('checked',false);
    //jQ_b.prop('checked',null);
    //jQ_b.prop('checked',undefined);//沒有任何效果,不會(huì)報(bào)錯(cuò)
  }

</script>
<style>
  .own{
    border:solid 2px red;
    padding:20px 5px 20px 40px;
    width:300px;
    margin:80 0 0 500;
  }
</style>
<head>
<body>
<!--
  通過(guò)實(shí)驗(yàn)得知：
    初始化讓單選框選中有4種方法可以實(shí)現(xiàn)：
    1、checked
    2、checked='checked'(建議用此方法，此方法對(duì)瀏覽器可以有很好的兼容性)
    3、checked='true'
    4、checked=true
    小提示：通過(guò)給checked屬性復(fù)制,只要checked存在,
      賦予任何值都可以初始化選中(eg:checked='aaa' 或 checked='false')
      不賦值都可以實(shí)現(xiàn)初始化選中
    測(cè)試成功案例：
      [checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'],
      [checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1']

    當(dāng)有多個(gè)被選中時(shí)，最后選中的單選框?yàn)樽詈笠粋€(gè)
-->

<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()'>測(cè)試點(diǎn)擊一下</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()'>測(cè)試點(diǎn)擊一下</button>
</div>

</body>
</html>

以上這篇利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: