利用原生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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
Javascript面向对象编程
Mar 18 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
关于两个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
php unset全局变量运用问题的深入解析
2013/06/17 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python抽取指定url页面的title方法
2018/05/11 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python3.6的venv模块使用详解
2018/08/01 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
学习Python爬虫的几点建议
2020/08/05 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
MYSQL支持事务吗
2013/08/09 面试题
大学生职业生涯设计书
2014/01/02 职场文书
网络技术专业求职信
2014/05/02 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
教育见习报告范文
2014/11/03 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js