利用原生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 相关文章推荐
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php $_ENV为空的原因分析
2009/06/01 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
php实现文件上传基本验证
2020/03/04 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python3中布局背景颜色代码分析
2020/12/01 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
工地宣传标语
2014/06/18 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书