摘要
总是忘记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);
});