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


Posted in Javascript onSeptember 04, 2016

根据以下的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实现单选框的勾选和取消操作的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 #Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 #Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 #Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 #Javascript
浅析$(function) ready和onload 的区别
Sep 03 #Javascript
详解Javascript中prototype属性(推荐)
Sep 03 #Javascript
jQuery基本选择器之标签名选择器
Sep 03 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
基于文本的留言簿
2006/10/09 PHP
php实现的SESSION类
2014/12/02 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python随机数分布random测试
2018/08/27 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
银行求职信个人范文
2013/12/16 职场文书
大学校务公开实施方案
2014/03/31 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
2019同学聚会主持词
2019/05/06 职场文书