關於radio選中或者反選

時間 2019-11-20

標籤關於 radio 選中或者简体版

原文原文鏈接

關注點：1、attr()和prop()的區別html

<!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裏的循環
        if($(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>

View Code

　　prop()函數針對的是DOM元素(JS Element對象)的屬性，attr()函數針對的是DOM元素所對應的文檔節點的屬性。jquery

（即：對於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"

2、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事件，實現單選按鈕反選。ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。