利用原生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>
<div class='own'>
<label>A1label><input id='a1' type='radio' value='1' name='test1' checked />
<label>B1label><input id='b1' type='radio' value='2' name='test1' checked='checked'/>
<label>C1label><input id='c1' type='radio' value='3' name='test1' checked='true' />
<label>D1label><input id='d1' type='radio' value='4' name='test1' checked=true />
<button onclick='fn1()'>测试点击一下button>
div>
<div class='own'>
<label>A2label><input id='a2' type='radio' value='1' name='test2' />
<label>B2label><input id='b2' type='radio' value='2' name='test2' checked/>
<label>C2label><input id='c2' type='radio' value='3' name='test2' />
<label>D2label><input id='d2' type='radio' value='4' name='test2' />
<button onclick='fn2()'>测试点击一下button>
div>
body>
html>
以上是本人自己测试的结果，用兴趣的可以copy实验一下。