html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法

根据以下的Demo，大概就可以看的明白

Demo:

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);//没有任何效果,不会报错

}

.own{

border:solid 2px red;

padding:20px 5px 20px 40px;

width:300px;

margin:80 0 0 500;

}

A1

B1

C1

D1

测试点击一下

A2

B2

C2

D2

测试点击一下

以上这篇利用原生js和jQuery实现单选框的勾选和取消操作的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。