关注点：一、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. 小程序 js 判断 字符串 为空 null
			
    判断字符串是否为空 1 2 3 4 5 var strings = ''; if (string.length == 0) { alert('不能为空'); } 判断字符串是否为“空”字符即用户输入了 ...
    
			
    2. 
						
  2. 头疼3－4次的问题，数据从DB导出到EXCEL，再从EXCEL导入到DB，数据格式发生错误 ，导致 程序出错。
			
    反思: 1 解决 问题的思路 绕远了: 在这个问题出现前,程序是运行正确 的 问题出现前,我误删了DB 的 testcase表的所有 case ,然后 再把邮件 中的excel数据导入到 DB 然后  ...
    
			
    3. 
						
  3. 发布delphi程序（build with runtime package）要带哪些文件？
			
    Delphi提供两种方式来编译你的程序:使用包或者是单独的exe 使用包,你可以使用如下方法设置: 项目选项(菜单project->options->Packages页), 在Runtim ...
    
			
    4. 
						
  4. 家用NAS配置方案
			
    对家用用户而言,NAS即一台下载机,硬件需要满足以下几点: 1.稳定性:24×7稳定无故障运行. 2.拓展性:较多的硬盘槽位,便于容量扩容: 3.体积小巧:占地面积小,便于放置. 4.方便远程管理:无 ...
    
			
    5. 
						
  5. 4.tensorflow——CNN
			
    1.CNN结构:X-->CONV(relu)-->MAXPOOL-->CONV(relu)-->FC(relu)-->FC(softmax)-->Y 1.1 卷积层 ...
    
			
    6. 
						
  6. 偏向锁，偏向线程id ,自旋锁
			
    理解锁的基础知识 如果想要透彻的理解Java锁的来龙去脉,需要先了解以下基础知识. 基础知识之一:锁的类型 锁从宏观上分类,分为悲观锁与乐观锁. 乐观锁 乐观锁是一种乐观思想,即认为读多写少,遇到并发 ...
    
			
    7. 
						
  7. C++中的内联函数分析
			
    1,本节课学习 C++ 中才引入的新的概念,内联函数: 2,常量与宏回顾: 1,C++ 中的 const 常量可以替代宏常数定义,如: 1,const int A = 3; <==> #d ...
    
			
    8. 
						
  8. 博弈的dfs
			
    题目: 链接:https://ac.nowcoder.com/acm/contest/283/D来源:牛客网 小西买了一堆肥宅快乐水和肥宅快乐茶,准备和室友比谁更肥宅. 快乐水有A瓶,快乐茶B瓶. 小 ...
    
			
    9. 
						
  9. SpringMVC学习（7）：格式化显示
			
    在系列(6)中我们介绍了如何验证提交的数据的正确性,当数据验证通过后就会被我们保存起来.保存的数据会用于以后的展示,这才是保存的价值.那么在展示的时候如何按照要求显示?(比如:小数保留一定的位数,日期 ...
    
			
    10. 
						
  10. 【转】IntelliJ IDEA 2016.1.3注册破解激活
			
    http://blog.csdn.net/c1481118216/article/details/51773674
    
			
    11.