注：字体文字取自bootstrap字体库https://icons.bootcss.com/icons
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.checkbox-com,.radio-com {position: relative;display: inline-block;}.checkbox-com i,.radio-com i {color: #fff;background: #fff;border: 1px solid #687078;display: flex;align-items: center;width: 14px;justify-content: center;height: 14px;font-size: 14px;border-radius: 2px;box-sizing: border-box;}.radio-com i {border-radius: 50%;overflow: hidden;}.checkbox-com i.checked,.radio-com i.checked {background: #ec7211;border: 1px solid #ec7211;}.checkbox-com input,.radio-com input {position: absolute;top: 0%;opacity: 0;left: 0;margin: 0;width: 14px;height: 14px;}</style><script type="text/javascript" src="jq.js"></script></head><body><p id="two" class="one one-1 one-2 one-3 one-4 one-5 one-6 one-7 one-8 one-9 one-10 one-11 one-12">222222222222222222222</p><div class="box"><span class="checkbox-com"><i class="bi bi-check-lg"></i><input type="checkbox"></span><span class="radio-group"><span><span class="radio-com"><i class="bi bi-record-circle-fill"></i><input type="radio" id="huey" name="drone" value="huey" checked></span><label for="huey">Huey</label></span><span><span class="radio-com"><i class="bi bi-record-circle-fill"></i><input type="radio" id="dewey" name="drone" value="dewey"></span><label for="dewey">Dewey</label></span></span></div><div></div></body>
</html>
<script type="text/javascript">$(document).ready(function() {let inputs = $("checkbox-com input:checked");inputs.each(function(index, el) {$(el).prev().addClass('checked')})// 单选$(document).on('click', 'input[type=checkbox]', function() {printInput($(this));})// 全选$(document).on('click', '.select-all input[type=checkbox]', function() {let inputs = $(this).parent().parent().parent().parent().find('input[type=checkbox]')if($(this).is(':checked')) {$.each(inputs, function(index, el) {$(el).prev().addClass('checked')})} else {$.each(inputs, function(index, el) {$(el).prev().removeClass('checked')})}})// radio$(document).on('click', 'input[type=radio]', function() {let inputs = $(this).parent().parent().parent().find("input");$.each(inputs, function(index, el) {printInput($(el));})})function printInput(el) {if($('.select-all').is(':checked')) {$('.select-all').prev().addClass('checked')} else {$('.select-all').prev().removeClass('checked')}if(el.is(':checked')) {el.prev().addClass('checked')} else {el.prev().removeClass('checked')}}});
</script>
