关注点：一、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. 题解 P1033 【自由落体】
			
    太坑人了 这不是明摆着坑那些没有学完初中物理的同学们 QAQ 首先这个题其实就是转换一下参照系. 由原先小车向小球靠拢换成小车静止,小球向着小车靠拢(原点设置成车右下角那个点). 然后就成了平抛运动. ...
    
			
    2. 
						
  2. Intel CPUs
			
    http://en.wikipedia.org/wiki/Intel_cpus List of Intel Atom microprocessors List of Intel Xeon microp ...
    
			
    3. 
						
  3. 2.2寸（14PIN）TFT液晶屏STM32 SPI 控制
			
    屏幕如图所示,共14个IO口(也可能只有13个),控制屏幕的有9个IO口 详细版介绍见:http://www.ciast.net/post/20151112.html 反面IO口图: 连接通过SPI方 ...
    
			
    4. 
						
  4. C#进阶系列——WebApi 路由机制剖析：你准备好了吗？ 转载https://www.cnblogs.com/landeanfen/p/5501490.html
			
    阅读目录 一.MVC和WebApi路由机制比较 1.MVC里面的路由 2.WebApi里面的路由 二.WebApi路由基础 1.默认路由 2.自定义路由 3.路由原理 三.WebApi路由过程 1.根 ...
    
			
    5. 
						
  5. inline-block,inline,block,table-cell,float
			
    float:left ----------------------------------------------------------------------------------------  ...
    
			
    6. 
						
  6. 2644. 数列 (Standard IO)
			
    这道题是道数论题,如果想对了的话会很快. 因为这道题实在是没有什么知识点,所以我直接上代码,代码上有很详细的注释: #include<iostream> #include<cstdi ...
    
			
    7. 
						
  7. Boosting Ensemble and GBDT Algorithm
			
    Boosting Ensemble: 机器学习中,Ensemble model除了Bagging以外,更常用的是Boosting.与Bagging不同,Boosting中各个模型是串行的.其思想是,后 ...
    
			
    8. 
						
  8. Jmeter 使用技巧 (如何在linux下运行jmeter视窗界面呢）-jmeter如何模拟http发送gzip数据
			
    jmeter如何模拟http发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量.  当然, 服 ...
    
			
    9. 
						
  9. LoadRunner内部结构(转)
			
    LoadRunner内部结构 1,            被测系统是由驱动进程mdrv.exe(多线程驱动的进程)和r3vuser.exe来产生压力的,其中r3vuser.exe仿真应用程序的客户端, ...
    
			
    10. 
						
  10. 安装Consul服务中心
			
    安装Consul服务中心 首先下载对应版本的安装程序.点击下载 我下载的是macOS64位版本,下载文件是一个ZIP文件,下载后解压缩到一个你喜欢的位置,以开发模式启动consul服务: #进入con ...
    
			
    11.