关于radio选中或者反选
2024-09-05 22:28:37
关注点:一、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事件,实现单选按钮反选。
最新文章
- Direct2D相关
- 【Leetcode】【Hard】Valid Number
- img图片之间的间距问题
- UVa 297 - Quadtrees
- *JRebel 热部署
- 使用gdb跟踪Linux内核启动过程(从start_kernel到init进程启动)
- C# 之 System.Object
- Robot Framework安装配置 windows
- uWSGI
- Android服务开发经验——优雅地活着
- LINUX 笔记-top命令
- URL简介
- 力扣(LeetCode) 997. 找到小镇的法官
- MySql Cast与Convert函数
- (CodeForces 548B 暴力) Mike and Fun
- <;小常识>;
- jvm高级特性(4)(内存分配回收策略)
- It isn&#39;t possible to write into a document from an asynchronously-loaded
- 【服务器_Tomcat】Tomcat的Server Options选项
- [ZJOI2014]力 FFT