首页 > 代码库 > 关于radio选中或者反选

关于radio选中或者反选

 

关注点:一、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里的循环
        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=http://www.mamicode.com/1]").bind(
      "click", 
      function(event){
            event.preventDefault()
      }
    );
$(input[type=radio][value=http://www.mamicode.com/1]).mouseup(function(){
debugger;
if($(input[type=radio][value=http://www.mamicode.com/1]).prop(checked)){
            $(input[type=radio][value=http://www.mamicode.com/1]).prop(checked,false);
        }else{
            $(input[type=radio][value=http://www.mamicode.com/1]).prop(checked,true);
        }
});
})
function aa(){
    debugger;
    console.log(aa);
    console.log($(input[type=radio][value=http://www.mamicode.com/1]));
    $(input[type=radio][value=http://www.mamicode.com/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元素所对应的文档节点的属性。

(即:对于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="http://www.mamicode.com/#" 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=http://www.mamicode.com/1]").bind(
  "click", 
  function(event){
event.preventDefault()
  }
);
$(‘input[type=radio][value=http://www.mamicode.com/1]‘).mouseup(function(){>
View Code

禁用radio的click事件,添加mouseup事件,实现单选按钮反选。

 

关于radio选中或者反选