<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); } };