关注点：一、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=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);

}

});

})

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

 
												


											
关于radio选中或者反选的更多相关文章
	

    
								
  1. 使用 jQuery 实现 radio 的选中与反选
		
    使用 jQuery 实现 radio 的选中与反选 我们知道在 Html 中当我们选中一个radio后,再次点击该 radio,那么该 radio 依然是一个选中的状态,但是有时我们需要实现这样的逻辑 ...
    
		
    2. 
						
  2. easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
		
    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...
    
		
    3. 
						
  3. Jquery 操作 radio选中值
		
    1.获取radio选中值 1.1  $('input:radio:checked').val(); 1.2  $("input[type='radio']:checked").va ...
    
		
    4. 
						
  4. 设置checkbox选中，设置radio选中，根据值设置checkbox选中，checkbox勾选
		
    设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...
    
		
    5. 
						
  5. jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
		
    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...
    
		
    6. 
						
  6. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
		
    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input  ...
    
		
    7. 
						
  7. query 中 radio选中小技巧
		
    在php中经常,经常要用到radio选中按钮,下次再登录时默认记录用户选中的选项,在PHP判断的时候: 在input中不能加checked=“<?php ;?>”:否则失效
    
		
    8. 
						
  8. jQuery获取radio选中后的文字
		
    原文链接:http://blog.csdn.net/zhanyouwen/article/details/51393216 jQuery获取radio选中后的文字转载 2016年05月13日 10:3 ...
    
		
    9. 
						
  9. JQuery控制radio选中和不选中方法总结
		
    一.设置选中方法 代码如下: $("input[name='名字']").get(0).checked=true; $("input[name='名字']"). ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. （转）docker-compose安装
			
    转:https://blog.csdn.net/pushiqiang/article/details/78682323 https://blog.csdn.net/ericnany/article/d ...
    
			
    2. 
						
  2. xcode安装pod
			
    参考了: https://blog.csdn.net/AugustDY/article/details/92078639 输入 ruby -v ,查看当前电脑的ruby版本,如果已经安装了ruby环境 ...
    
			
    3. 
						
  3. python分类预测模型的特点
			
    python分类预测模型的特点 模型 模型特点 位于 SVM 强大的模型,可以用来回归,预测,分类等,而根据选取不同的和函数,模型可以是线性的/非线性的 sklearn.svm 决策树 基于" ...
    
			
    4. 
						
  4. 测开之路四十八：Django之重定向与cookie
			
    基础配置与上一篇一致 404错误 定义一个error页面 <!DOCTYPE html><html lang="en"><head> <m ...
    
			
    5. 
						
  5. zabbix真的很简单 (安装篇)
			
    系统环境: Centos 6.4 一直觉得 zabbix 很简单,但是还是有好多人看了好多文档都搞不明白怎么用,我从2013年使用到现在也小有心得,如果时间允许,很高兴与大家一起分享我在使用过程中的一 ...
    
			
    6. 
						
  6. Nginx的作用详解
			
    Nginx的产生 没有听过Nginx?那么一定听过它的"同行"Apache吧!Nginx同Apache一样都是一种WEB服务器.基于REST架构风格,以统一资源描述符(Unifor ...
    
			
    7. 
						
  7. RSA加密、解密实现原理
			
    RSA加密.解密实现原理 1.公钥.私钥
    
			
    8. 
						
  8. 希尔排序(shell)理论---不含源码
			
    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 希尔排序,是一个缩小增量排序.它根据步长来进行排序,步长不同可能会产生不同的序列,但是他们的最终结果是相同的,希尔排序的官方理论难以理解, ...
    
			
    9. 
						
  9. Redis 系列（02）数据结构
			
    目录 Redis 系列(02)数据结构 Redis 系列目录 1. String 1.1 基本操作 1.2 数据结构 1.3 Redis数据存储结构 2. Hash 2.1 基本操作 2.2 数据结构 ...
    
			
    10. 
						
  10. BZOJ 4003 (可并堆）
			
    题面 小铭铭最近获得了一副新的桌游,游戏中需要用 m 个骑士攻占 n 个城池. 这 n 个城池用 1 到 n 的整数表示.除 1 号城池外,城池 i 会受到另一座城池 fi 的管辖, 其中 fi &l ...
    
			
    11.