关注点：一、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. （转）Groovy简介
			
    转:https://www.w3cschool.cn/groovy/ Groovy的官方网站是http://www.groovy-lang.org/ Groovy是一种基于JVM(Java虚拟机)的敏 ...
    
			
    2. 
						
  2. Cent OS （二）常用的命令介绍
			
    1. 常用的Linux命令   序号 命令 对应英文 作用 01 ls list 查看当前文件夹下的内容 02 pwd print work directory 查看当前所在的文件夹 03 cd [目 ...
    
			
    3. 
						
  3. Houdini学习笔记——【一】散落苹果
			
    [案例一]散落的苹果 0.渲染 1.sop使用 - 苹果主体:curve绘制刨面曲线,revolve车削得到苹果主体,uvtexture来调整uv,convert继续转换为polygon,fuse缝合 ...
    
			
    4. 
						
  4. 日期和时间格式（ISO 8601）
			
    参考 ISO 8601 - Wikipedia ISO 8601 Date and time format
    
			
    5. 
						
  5. linux执行时间段内日志关键字搜索
			
    sed -n '/起始时间/,/结束时间/p' 日志文件 | grep '关键字' 查询文件debug.log在2019-11-18 08:00:00~2019-11-18 08:21:00时间段内e ...
    
			
    6. 
						
  6. PS操作
			
    笔:B 橡皮:E 新建:C+N 选取套索:L 套索后按Alt,移动 放大:Ctrl + “+” 或 Z 缩小:Ctrl + “-” 或 Alt Z / Alt ,然后用滑轮控制大小 撤销:Ctrl + ...
    
			
    7. 
						
  7. iview+vue 表格中添加图片
			
    开门见山,话不多说,要在表格中添加图片,可以使用td: <table " width="100%"> <tr class="tr-style  ...
    
			
    8. 
						
  8. Chrome 强行修改配置
			
    大约有两个月没写了,一是最近这两个月还挺忙,更重要的是也没有遇到什么好玩的,或者是要记录的,今天无意间遇到一个非技术问题:Chrome设置的问题. 问题描述: chrome 在下载文件时,默认情况下是 ...
    
			
    9. 
						
  9. fpm rpm制作
			
    使用fpm命令制作rpm包并安装 工作中有如下情况需要将文件打包rpm: 避免重复工作,将源码程序打包为rpm 使用yum发布项目,项目打包为rpm 将自己写好的程序打包为rpm,提供给用户下载 其他 ...
    
			
    10. 
						
  10. Reciting(third)
			
      It is subtly demonstrate in the portrayal that a teacher is teaching mathmatics in a certain class ...
    
			
    11.