1. 云栖社区>
  2. >
  3. 正文

利用原生js和jQuery实现单选框的勾选和取消操作的方法_javascript技巧

作者:用户 来源:互联网 时间:2016-09-04 15:28:01

jquery单选框

利用原生js和jQuery实现单选框的勾选和取消操作的方法_javascript技巧 - 摘要: 本文讲的是利用原生js和jQuery实现单选框的勾选和取消操作的方法_javascript技巧, 根据以下的Demo,大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></script> <scrip

根据以下的Demo,大概就可以看的明白

Demo:

<html>
<head>
<script src='jquery-1.9.1.min.js'></script>
<script>
  window.onload = function(){
    var dom_a = document.getElementById('a1');
    var dom_b = document.getElementById("b1");
    //alert("A="+dom_a.value+" || B="+dom_b.value);
  }

  //以下开始操作radio的取消和勾选
  //原生js操作
  function fn1(){
    var dom_a = document.getElementById('a1');
    var dom_b = document.getElementById("b1");
    //勾选
    dom_a.checked = true;
    //dom_a.checked = 'false';
    //dom_a.checked = 123;
    //取消勾选
    dom_b.checked = '';
    //dom_b.checked = false;//取消勾选
    //dom_b.checked = null;//取消勾选
    //dom_b.checked = undefined;//取消勾选

  }
  //利用jQuery操作
  function fn2(){
    var jQ_a = $('#a2');
    var jQ_b = $("#b2");
    //勾选
    jQ_a.prop('checked','abc');
    //jQ_a.prop('checked','123');
    //jQ_a.prop('checked','true');
    //jQ_a.prop('checked',true);
    //jQ_a.prop('checked',123);//数字可以
    //jQ_a.prop('checked',-1);
    //jQ_a.prop('checked',abc);//会报错,abc未定义 {所以预猜测checked只要有已定义的值即可实现选中(undefined代表未定义)}
    //取消勾选
    jQ_b.prop('checked','');
    //jQ_b.prop('checked',false);
    //jQ_b.prop('checked',null);
    //jQ_b.prop('checked',undefined);//没有任何效果,不会报错
  }

</script>
<style>
  .own{
    border:solid 2px red;
    padding:20px 5px 20px 40px;
    width:300px;
    margin:80 0 0 500;
  }
</style>
<head>
<body>
<!--
  通过实验得知:
    初始化让单选框选中有4种方法可以实现:
    1、checked
    2、checked='checked'(建议用此方法,此方法对浏览器可以有很好的兼容性)
    3、checked='true'
    4、checked=true
    小提示:通过给checked属性复制,只要checked存在,
      赋予任何值都可以初始化选中(eg:checked='aaa' 或 checked='false')
      不赋值都可以实现初始化选中
    测试成功案例:
      [checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'],
      [checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1']

    当有多个被选中时,最后选中的单选框为最后一个
-->

<div class='own'>
<label>A1</label><input id='a1' type='radio' value='1' name='test1' checked />
<label>B1</label><input id='b1' type='radio' value='2' name='test1' checked='checked'/>
<label>C1</label><input id='c1' type='radio' value='3' name='test1' checked='true' />
<label>D1</label><input id='d1' type='radio' value='4' name='test1' checked=true />
<button onclick='fn1()'>测试点击一下</button>
</div>

<div class='own'>
<label>A2</label><input id='a2' type='radio' value='1' name='test2' />
<label>B2</label><input id='b2' type='radio' value='2' name='test2' checked/>
<label>C2</label><input id='c2' type='radio' value='3' name='test2' />
<label>D2</label><input id='d2' type='radio' value='4' name='test2' />
<button onclick='fn2()'>测试点击一下</button>
</div>

</body>
</html>

以上这篇利用原生js和jQuery实现单选框的勾选和取消操作的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持云栖社区。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery 单选框 javascript单选框、javascript弹出单选框、jquery单选框选中事件、jquery 单选框选中、jquery单选框取值,以便于您获取更多的相关知识。

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

开发者常用软件,超百款实用软件一站式提供