1. 程式人生 > >以checked選中作為判斷條件的各種寫法

以checked選中作為判斷條件的各種寫法

<input type="radio" name="choice" id="ipt1">
<label for="ipt1">彈出1</label>
<input type="radio" name="choice" id="ipt2">
<label for="ipt2">彈出2</label>
<input type="button" value="確定" id="confirm">

首先參考attr與prop的區別:

attr 讀取DOM節點屬性,當頁面渲染完,checked屬性就確定了。

prop 讀取HTML元素屬性,checked屬性可以改變。

以下為錯誤示例:

複製程式碼
//錯誤:使用attr判斷,在上面的html中未選中,得到的是false;
$('#confirm').click(function(){
    if($('#ipt1').attr('checked')){
         alert(1);
    }else{
         alert(2);
    }
});

//錯誤:JS與jquery混寫,jQuery中沒有.checked屬性,得到的是false;
$('#confirm').click(function(){
    if($('#ipt1').checked){
         alert(1);
    }else
{ alert(2); } }); //錯誤:判斷的是jQuery中$('#ipt1:checked')選擇器是否存在,得到的是true; $('#confirm').click(function(){ if($('#ipt1:checked')){ alert(1); }else{ alert(2); } });
複製程式碼

以下為正確示例:

複製程式碼
//正確:jQuery用is方法傳入:checked偽類選擇器。
 $('#confirm').click(function(){
    if($('#ipt1').is(":checked")){
         alert(1);
    }else
{ alert(2); } }); //正確:用prop讀取HTML元素屬性。 $('#confirm').click(function(){ if($('#ipt1').prop('checked')){ alert(1); }else{ alert(2); } }); //正確:JS寫法。 var confirm=document.getElementById('confirm'); confirm.onclick = function(){ var oIpt1=document.getElementById('ipt1'); if(oIpt1.checked == true){ alert(1); }else{ alert(2); } };
複製程式碼