以checked選中作為判斷條件的各種寫法
阿新 • • 發佈:2018-12-22
<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); } };