【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);
});