关注点：一、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. soj#551 loj#2833 帐篷
			
    传送门 分析 dp[i][j]表示考虑了i行j列的方案数 我们每次考虑三种情况: 一个点自己放 两个点在同一行 两个点在同一列 代码 #include<bits/stdc++.h> usi ...
    
			
    2. 
						
  2. Ajax跨域（CROS）请求中的Preflighted requests
			
    Ajax跨域(CROS)请求中的Preflighted requests:https://www.aliyun.com/jiaocheng/862989.html 10 分钟理解跨域请求:https: ...
    
			
    3. 
						
  3. 在学react时候找不到static/js/bundle.js
			
    看如图上面bundle.js,我在项目中和配置文件中都没有找到这个JS文件,然后我就觉得很诧异,然后各种查找,终于找到一篇文章,在此记录一下 第一步:npm run start             ...
    
			
    4. 
						
  4. java虚拟机规范(se8)——class文件格式(四)
			
    4.7 属性 属性用于class文件格式中的ClassFile,field_info,method_info和Code_attribute结构. 所有的属性都是下面的格式: attribute_inf ...
    
			
    5. 
						
  5. SpringMVC学习（10）：异常处理
			
    在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码精简且便于维护呢?这就是本篇要讲的内容->异 ...
    
			
    6. 
						
  6. SecureCRT安装，服务器远程连接客户端SSH
			
    SSH: Secure Shell 的缩写,是用来连接Linux服务器系统的软件.   它可以同时创建多个连接,方便对服务器的操作使用,界面也比Linux系统好看的多,同时安装一些必备的软件能更加方便 ...
    
			
    7. 
						
  7. 一、Gulp
			
    开发和部署前端项目: 在开发Web应用中为加速客户端资源响应(js和css),减少对js和css的请求,通过bundles来实现. 在ASP.NET5中放弃该特性,被其他类似的组件所代替.比如使用Gu ...
    
			
    8. 
						
  8. struct模块的使用
			
    原理: 将一组简单数据进行打包,转换为bytes格式发送.或者将一组bytes格式数据,进行解析. 接口使用 Struct(fmt) 功能: 生成结构化对象 参数:fmt 定制的数据结构 st.pac ...
    
			
    9. 
						
  9. 转：动态库路径配置- /etc/ld.so.conf文件
			
    Linux 共享库 Linux 系统上有两类根本不同的 Linux 可执行程序.第一类是静态链接的可执行程序.静态可执行程序包含执行所需的所有函数 — 换句话说,它们是“完整的”.因为这一原因,静态可 ...
    
			
    10. 
						
  10. Linux 下安装sql server 时 2G内存限制的最新（2019-08-15） 解决方案
			
    关于 sqlserver 在linux下安装时有最小内存限制的问题,网上有很多类似的说明,那些操作都是正确的,如果不成功可能 “姿势”不对. 需要注意的是:不能使用最新版本!!!  不能在线下载!!! ...
    
			
    11.