【js】操作checkbox radio 的操作总结

摘要

总是忘记checkbox radio 的具体操作，总是坑自己，总结下记下来

html

<input type="checkbox" value="1" name="ckTest" id="ckTest1">1</input>
<input type="checkbox" value="2" name="ckTest" id="ckTest2" checked>2</input>
<input type="checkbox" value="3" name="ckTest" id="ckTest3">3</input>

<button id="btnCheck">选中第二个元素</button>
<button id="btnUnCheck">取消选中第二个元素</button>

jquery

// 获取选中的元素
var checkedList = $(\'input[name=ckTest]:checked\');
console.log(checkedList);

// 获取某一元素的选中状态
var $ckTest2 = $(\'#ckTest2\');
$ckTest2.click(function () {
	console.log($ckTest2.prop(\'checked\'));
});

// 选中/不选中某一元素
$(\'#btnCheck\').click(function () {
	$(\'input[name=ckTest][value=2]\').prop(\'checked\', true);
	console.log($ckTest2.prop(\'checked\'));
});

$(\'#btnCheck\').click(function () {
	$(\'input[name=ckTest][value=2]\').prop(\'checked\', false);
	console.log($ckTest2.prop(\'checked\'));
});

原生js

// 原生js操作
/**
 * @description 事件绑定，兼容各浏览器
 * @param target 事件触发对象
 * @param type   事件
 * @param func   事件处理函数
 */
function addEvents(target, type, func) {
    if (target.addEventListener)    //非ie 和ie9
        target.addEventListener(type, func, false);
    else if (target.attachEvent)   //ie6到ie8
        target.attachEvent("on" + type, func);
    else target["on" + type] = func;   //ie5
};
/**
 * @description 事件移除，兼容各浏览器
 * @param target 事件触发对象
 * @param type   事件
 * @param func   事件处理函数
 */
function removeEvents(target, type, func){
    if (target.removeEventListener)
        target.removeEventListener(type, func, false);
    else if (target.detachEvent)
        target.detachEvent("on" + type, func);
    else target["on" + type] = null;
};
// 获取选中的元素
var ckList = document.getElementsByName(\'ckTest\');
var checkedList1 = [];
for (var i = 0 ; i < ckList.length; i++) {
	var ck = ckList[i];
	if (ck.checked) {
		checkedList1.push(ck);
	}
}
console.log(checkedList1);
// 获取某一元素的选中状态
var ckTest2 = document.getElementById(\'ckTest2\');
addEvents(ckTest2, \'click\', function () {
	console.log(ckTest2.checked);
});
// 选中/不选中某一元素
var btnCheck = document.getElementById(\'btnCheck\');
addEvents(btnCheck, \'click\', function () {
	ckTest2.checked = true;
	console.log(ckTest2.checked);
});
var btnUnCheck = document.getElementById(\'btnUnCheck\');
addEvents(btnUnCheck, \'click\', function () {
	ckTest2.checked = false;
	console.log(ckTest2.checked);
});