關於radio選中或者反選
阿新 • • 發佈：2017-06-28
11.2 deb log 循環 color w3c標準 checkbox spa js事件綁定
關註點：一、attr()和prop()的區別
<!DOCTYPE html> <html> <head> <title>JavaScript對文字按照拼音排序</title> <script src="jquery-1.11.2.min.js"></script> <script> function checkPut(){ var inputs=$(".radio"); var num=[]; inputs.each(function(){ //each() 是jquery裏的循環View Codeif($(this).prop(‘checked‘)){ debugger; num.push($(this).val()); } }); alert(num); } function checkAll(){ debugger; var inputs=$(".radio"); inputs.each(function(){ if(!$(this).prop(‘checked‘)){ $(this).prop(‘checked‘,‘checked‘); } }); }function unCheckAll(){ var inputs=$(‘.radio‘); inputs.each(function(){ if($(this).prop(‘checked‘)){ $(this).prop(‘checked‘,false); }else{ $(this).prop(‘checked‘,true); } }); } $(function(){ $("input[type=radio][value=1]").bind( "click", function(event){ event.preventDefault() } ); $(‘input[type=radio][value=1]‘).mouseup(function(){ debugger; if($(‘input[type=radio][value=1]‘).prop(‘checked‘)){ $(‘input[type=radio][value=1]‘).prop(‘checked‘,false); }else{ $(‘input[type=radio][value=1]‘).prop(‘checked‘,true); } }); }) function aa(){ debugger; console.log(‘aa‘); console.log($(‘input[type=radio][value=1]‘)); $(‘input[type=radio][value=1]‘).prop(‘checked‘,false); } </script> </head> <body> <input type="radio" class="radio" value="1" /> 1 <input type="radio" class="radio" value="2" /> 2 <input type="radio" class="radio" value="3" /> 3 <input type="radio" class="radio" value="4" /> 4 <input type="radio" class="radio" value="5" /> 5 <input type="radio" class="radio" value="6" /> 6 <input type="submit" onclick="checkPut();"/> <input type="button" value="全選" onclick="checkAll();"/> <input type="button" value="反選" onclick="unCheckAll();"/> <input type="button" value="取消" onclick="aa();"/> </body> </html>
prop()函數針對的是DOM元素(JS Element對象)的屬性，attr()函數針對的是DOM元素所對應的文檔節點的屬性。
（即：對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。）
例如：
<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
這個例子裏<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是W3C標準裏就包含有這幾個屬性，或者說在IDE裏能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。
<a href="#" id="link1" action="delete">刪除</a>
這個例子裏<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個是固有屬性，而後面一個“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設置屬性值時，都會返回undefined值。
<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見
像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此需要使用prop方法去操作才能獲得正確的結果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果使用attr，則：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
二、js事件綁定
$(function(){
$("input[type=radio][value=1]").bind(
"click",
function(event){
event.preventDefault()
}
);
$(‘input[type=radio][value=1]‘).mouseup(function(){
debugger;
if($(‘input[type=radio][value=1]‘).prop(‘checked‘)){
$(‘input[type=radio][value=1]‘).prop(‘checked‘,false);
}else{
$(‘input[type=radio][value=1]‘).prop(‘checked‘,true);
}
});
})
View Code
禁用radio的click事件，添加mouseup事件，實現單選按鈕反選。
關於radio選中或者反選