摘要
总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来
html
123
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);});