首页 > 代码库 > 关于radio选中或者反选
关于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=http://www.mamicode.com/1]").bind( "click", function(event){ event.preventDefault() } ); $(‘input[type=radio][value=http://www.mamicode.com/1]‘).mouseup(function(){ debugger; if($(‘input[type=radio][value=http://www.mamicode.com/1]‘).prop(‘checked‘)){ $(‘input[type=radio][value=http://www.mamicode.com/1]‘).prop(‘checked‘,false); }else{ $(‘input[type=radio][value=http://www.mamicode.com/1]‘).prop(‘checked‘,true); } }); }) function aa(){ debugger; console.log(‘aa‘); console.log($(‘input[type=radio][value=http://www.mamicode.com/1]‘)); $(‘input[type=radio][value=http://www.mamicode.com/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="http://www.mamicode.com/#" 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=http://www.mamicode.com/1]").bind(
"click",
function(event){
event.preventDefault()
}
);
$(‘input[type=radio][value=http://www.mamicode.com/1]‘).mouseup(function(){>
禁用radio的click事件,添加mouseup事件,实现单选按钮反选。
关于radio选中或者反选
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。