利用原生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实现单选框的勾选和取消操作的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
原生js封装的一些jquery方法(详解)
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
-
原生js仿jquery一些常用方法(必看篇)
最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.display="none"; return this; } //show() Object.prototype.show = function(){ this.style.displa
-
仿jQuery的siblings效果的js代码
复制代码 代码如下: function siblings(o){//参数o就是想取谁的兄弟节点,就把那个元素传进去 var a=[];//定义一个数组,用来存o的兄弟元素 var p=o.previousSibling; while(p){//先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 p表示previousSibling if(p.nodeType===1){ a.push(p); } p=p.previousSibling//最后把上一个节点赋给p } a.reverse()
-
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
js的 bug 类型: Uncaught TypeError:Cannot set/read property 'xxx' of null 在进行DOM操作的时候比较容易发生这个错误,比如: 1. document.getElementById('test1').style.display='none' 2. document.getElementById('test1').onclick=function(){/*相关代码*/} 假如DOM中无此 test1对象,将会抛出上面的错误,发生
-
原生js仿jquery animate动画效果
jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40
-
利用原生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(
-
JS与jQuery判断文本框还剩多少字符可以输入的方法
本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法.分享给大家供大家参考,具体如下: javascript部分: function $(id) { return document.getElementById(id); } var maxLen=255; function checkMaxInput(){ if($("summary").value.length>maxLen){ $("summary").value=$("summ
-
基于vue v-for 循环复选框-默认勾选第一个的实现方法
应用场景:在进行多选的时候一般默认显示第一个. 实现方法:纯vue实现 例子: <span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>
-
利用原生JS与jQuery实现数字线性变化的动画
前言 大家应该都有所体会,在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据.于是有了下文. 在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件. 数字线性变化的原理很简单,就是让数字增量变化,并循环动画. 原生JS版 首先获取DOM元素.为了兼容到IE6,兼容性方法如下: var domUtil = { // 获取DOM元素 get: function(query) { var _this = this; if(
-
js和jquery分别验证单选框、复选框、下拉框
本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen
-
vue.js实现单选框、复选框和下拉框示例
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
-
用jquery与css打造个性化的单选框和复选框
上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
js实现iPhone界面风格的单选框和复选框按钮实例
本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮.分享给大家供大家参考.具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "