关于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事件,实现单选按钮反选。

 
				
时间: 2024-11-08 21:18:49

关于radio选中或者反选的相关文章

js控制radio选中

经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值,使用的$().attr("checked",true); 当切换的时候,把name相同的radio的attr("checked",false),再把要选中的radio.attr("checked",true): 但是问题来了,每个radio只能被赋值一次,当第二次给他赋值的时候,赋不上值

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id'

jQuery_review之table中根据行选中,进行背景变色和radio选中

在各种WEB系统中经常可以看到类似的操作,点击中列表的某一行,然后当前行就会变成其他的颜色,并且其中的radio就会被选中.并且一般还会鼠标滑过的时候的动态特效,比如鼠标滑过当前行的时候会有一个变色的样式.趁着复习jQuery的机会,看一下使用jQuery来实现这个功能的步骤. 在这个功能当中,有一个需要注意的小知识点:如何增加一个radio?在HTML中,增加一个HTML使用如下的代码<input type="radio" name="fruit">这

jquery 根据值设置radio选中状态

radio选中 $("input[name=test][value=34]").attr("checked",true);//value=34的radio被选中 $("input[id=testid][value=34]").attr("checked",true);//value=34的radio被选中 jquery 根据值设置radio选中状态

easyui 》 radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中

获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').g

JQuery控制radio选中和不选中方法总结

一.设置选中方法 代码如下: $("input[name='名字']").get(0).checked=true; $("input[name='名字']").attr('checked','true'); $("input[name='名字']:eq(0)").attr("checked",'checked'); $("input[name='radio_name'][checked]").val();

jQuery获取radio选中后的文字

原文链接:http://blog.csdn.net/zhanyouwen/article/details/51393216 jQuery获取radio选中后的文字转载 2016年05月13日 10:32:14 标签:jQuery获取radio选中后的文字 850 HTML 示例如下: [html] view plain copy<input type="radio" id="male" name="sex" value="1&qu

jq 由name获取那个radio选中了的

$("input[name='approve']:checked").val() //获取radio选中的值;var radio_checked_val = $("#form_step_1_ejs_append_id input[name='1']:checked").val();console.log(radio_checked_val);return false; 原文地址:https://www.cnblogs.com/pansidong/p/8439212.

jquery获取radio选中的值或者select做出判断事件

<dl class="clearfix" id="shifou"> <dt>是否已报名:</dt> <dd><input type="radio" name='sf' value='1'>已报名    <input type="radio" name='sf' value='0'>未报名(有意向)</dd> </dl> <dl