关于radio选中或者反选
关注点：一、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选中或者反选的更多相关文章
- 使用 jQuery 实现 radio 的选中与反选
使用 jQuery 实现 radio 的选中与反选 我们知道在 Html 中当我们选中一个radio后,再次点击该 radio,那么该 radio 依然是一个选中的状态,但是有时我们需要实现这样的逻辑 ...
- easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...
- Jquery 操作 radio选中值
1.获取radio选中值 1.1 $('input:radio:checked').val(); 1.2 $("input[type='radio']:checked").va ...
- 设置checkbox选中，设置radio选中，根据值设置checkbox选中，checkbox勾选
设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...
- jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- query 中 radio选中小技巧
在php中经常,经常要用到radio选中按钮,下次再登录时默认记录用户选中的选项,在PHP判断的时候: 在input中不能加checked=“<?php ;?>”:否则失效
- jQuery获取radio选中后的文字
原文链接:http://blog.csdn.net/zhanyouwen/article/details/51393216 jQuery获取radio选中后的文字转载 2016年05月13日 10:3 ...
- JQuery控制radio选中和不选中方法总结
一.设置选中方法 代码如下: $("input[name='名字']").get(0).checked=true; $("input[name='名字']"). ...
随机推荐
- Java JsonPath grab InvalidPathException in code, you must be catching Java 7's java.nio.file.InvalidPathException instead of JsonPath's com.jayway.jsonpath.InvalidPathExceptio
I am using JsonPath and am able to parse my data and get the values when the path provided is correc ...
- (66) c# async await
1.使用 async await 2.返回值 static void Main(string[] args) { Program p = new Program(); Console.WriteLin ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- 重定向和转向的写法，重定向以post方式提交
重转向保留跳转过来的Referer,路径不会变1 request.getRequestDispatcher("/eventweb/index.sp?loginId=" + logi ...
- hdfs 创建一个新用户
需要给第三方提供hdfs用户,和上传文件的权限 1.需要先在linux 上创建一个普通用户: hn,并修改密码 sudo -u hdfs hadoop fs -mkdir /user/用户名 sudo ...
- 【转】C++ STL中常见容器的时间复杂度
map, set, multimap, and multiset 上述四种容器采用红黑树实现,红黑树是平衡二叉树的一种.不同操作的时间复杂度近似为: 插入: O(logN) 查看:O(logN) 删除 ...
- 后台得到jsp提交name属性相同的内容
直接上代码: req.setCharacterEncoding("utf-8");String [] node = req.getParameterValues("nod ...
- 简单认识php
1.输出语句: echo 'hello world'; 2.声明变量用 $ 符号 $uname = 'andy'; 3. php 拼接字符串用 点(.) //设置中文编码 header("c ...
- 【杂记】docker搭建ELK 集群6.4.0版本 + elasticsearch-head IK分词器与拼音分词器整合
大佬博客地址:https://blog.csdn.net/supermao1013/article/category/8269552 docker elasticsearch 集群启动命令 docke ...
- shell字符串的空值检查