<!DOCTYPE html><html><head><meta charset="UTF-8"><style>/*自定义checkbox样式*/input[type="checkbox"], input[type="checkbox"]:enabled,input[type="radio"], input[type="radio"]:enabled {cursor: pointer;width: 22px; /*根据背景图片来确定宽度*/height: 22px; /*根据背景图片来确定高度*/background-image: url(/assets/checkBoxAndRadioButton/skins/square/blue.png);/*skins文件夹下面有6中皮肤样式：flat、futurico、line、minimal、polaris、square：flat文件夹里面都有：aero、blue、flat、green、grey、orange、pink、purple、red、yellow这几个png图片；futurico文件夹里面都有：futurico.png图片；line文件夹里面都有：line.png图片；minimal文件夹里面都有：aero、blue、green、grey、minimal、orange、pink、purple、red、yellow这几个png图片；polaris文件夹里面都有：polaris.png图片；minimal文件夹里面都有：aero、blue、green、grey、orange、pink、purple、red、square、yellow这几个png图片。【注意】不同的图片皮肤的不同状态图标的偏离位移像素值是不同的，自己用Photoshop去测量！*//*background-image: url(/assets/checkBoxAndRadioButton/skins/square/blue@2x.png);!*高清图片格式*!*//*background-image: url(/p/icheck/skins/square/blue.png); !*备用地址*!*/background-repeat: no-repeat;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;transition: none;-moz-transition: none;-webkit-transition: none;-o-transition: none;vertical-align: middle;}input[type="checkbox"] ~ label,input[type="radio"] ~ label {cursor: pointer;font-size: 16px;font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial';-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;padding-left: 10px;}input[type="checkbox"][hover],input[type="checkbox"]:hover {background-position-x: calc(-24px * 1);}input[type="checkbox"]:checked {background-position-x: calc(-24px * 2);}input[type="checkbox"]:disabled {background-position-x: calc(-24px * 3);pointer-events: none;}input[type="checkbox"]:checked:disabled {background-position-x: calc(-24px * 4);}input[type="radio"], input[type="radio"]:enabled {background-position-x: calc(-24px * 5);}input[type="radio"][hover],input[type="radio"]:hover {background-position-x: calc(-24px * 6);}input[type="radio"]:checked {background-position-x: calc(-24px * 7);}input[type="radio"]:disabled {background-position-x: calc(-24px * 8);pointer-events: none;}input[type="radio"]:checked:disabled {background-position-x: calc(-24px * 9);}</style></head><body><fieldset id="fs1"><legend>舒工给你自定义复选框</legend><input type="checkbox" value="1" id="ch1"> <label for="ch1">复选框（默认）</label><input type="checkbox" value="2" id="ch2" hover> <label for="ch2">复选框（移入状态）</label><input type="checkbox" value="3" id="ch3" checked> <label for="ch3">复选框（选中状态）</label><input type="checkbox" value="4" id="ch4" disabled> <label for="ch4">复选框（禁用状态）</label><input type="checkbox" value="5" id="ch5" checked disabled> <label for="ch5">复选框（选中禁用状态）</label></fieldset><fieldset id="fs2"><legend>舒工给你自定义单选框</legend><input type="radio" value="1" id="rd1" name="radio"> <label for="rd1">单选框（默认）</label><input type="radio" value="2" id="rd2" name="radio" hover> <label for="rd2">单选框（移入状态）</label><input type="radio" value="3" id="rd3" name="radio" checked> <label for="rd3">单选框（选中状态）</label><input type="radio" value="4" id="rd4" name="radio" disabled> <label for="rd4">单选框（禁用状态）</label><input type="radio" value="5" id="rd5" checked disabled> <label for="rd5">单选框（选中禁用状态）</label></fieldset></body><script>var check = {get: function (selOrName, isIntValue, isByName) {isByName || (isByName = !(selOrName.includes(".") || selOrName.includes("#")));var arr = isByName ? document.getElementsByName(selOrName) : document.querySelectorAll(selOrName + " input");var r = [];for (var i in arr) {var a = arr[i];a.checked && r.push(isIntValue ? parseInt(a.value) : a.value);}return r;},set: function (selOrName, value, isIntValue, isByName) {isByName || (isByName = !(selOrName.includes(".") || selOrName.includes("#")));var arr = isByName ? document.getElementsByName(selOrName) : document.querySelectorAll(selOrName + " input");for (var i in arr) {var a = arr[i];if (isIntValue) {parseInt(a.value) === parseInt(value) && (a.checked = true);} else {a.value == value && (a.checked = true);}}}, /*全选true，全不选false，反选undefined*/checkAll: function (sel, bool = null) {var arr = document.querySelectorAll(sel + " input[type='checkbox']");for (var i = 0, len = arr.length; i < len; i++) {var a = arr[i];a.checked = bool === null ? !a.checked : bool;}}};/*测试用例*/console.log(check.get("#fs1"));//打印出["3", "5"]console.log(check.get("#fs1", true));//打印出[3, 5]</script></html>
