利用原生js和jQuery实现单选框的勾选和取消操作的方法
更新时间：2016年09月04日 09:56:17 投稿：jingxian
下面小编就为大家带来一篇利用原生js和jQuery实现单选框的勾选和取消操作的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
根据以下的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实现樱花飘落效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
今天小编就为大家分享一篇layui使用label标签的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本篇文章主要介绍了webpack 打包压缩js和css的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了JavaScript 九种跨域方式实现原理，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章介绍了javascript抖动元素的小例子，有需要的朋友可以参考一下2013-10-10
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
这篇文章主要介绍了JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承,需要的朋友可以参考下2014-08-08
headjs其实是一整套的工具，本文介绍的是它其中的Javascript Loader功能。需要的朋友可以参考下2016-11-11
Bootstrap与KnockoutJs相结合实现分页效果实例详解
KnockoutJS是一个JavaScript实现的MVVM框架。接下来通过本文给大家介绍Bootstrap与KnockoutJs相结合实现分页效果，对bootstrap knockoutjs相关知识感兴趣的朋友一起学习吧2016-05-05
这篇文章主要给大家介绍了关于微信小程序页面返回传值的4种解决方案,小程序开发中经常会遇到这种场景,比如提交问题,然后需要返回之前页面,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
BootStrap中的模态框（modal，弹出层）功能示例代码
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。这篇文章主要介绍了BootStrap中的模态框（modal，弹出层）,需要的朋友可以参考下2018-11-11
最新评论