一个特殊事项 radio 和 chebox 的差别

<!-- 多次点击radio单选框时，只能是选中状态，无法取消选中状态 -->
<input type="radio" value="number">

<!-- 多次点击checkbox复选框时，是可以在选中和取消两种状态之间切换的 -->
<input type="checkbox" value="number">

我就想用radio实现checkbox的状态切换怎么办?

示例: 实现点击label标签和点击input[radio]都可以进行选中、取消选两种状态的切换

方法一

<div class="method1">
     <label for="" style="font-size: 12px;cursor:pointer;" class="isOpenNumberType">  
         <input type="radio" value="xxx" style="position: relative;z-index: -1;">
         <span>同意</span>
    </label>
</div>
<script>
    const _labelEl = document.querySelector('.method1 label');
    const _radioEl = document.querySelector('.method1 input');

    _labelEl.addEventListener('click', () => {
      _radioEl.checked = !_radioEl.checked;
    });
</script>

方法二

<label style="font-size: 12px;cursor:pointer;" class="isOpenNumberType">
    <input type="radio" value="true">
    <span>同意</span>
</label>

<script>
    const inputRadioEl = el.querySelector('input');

    let beforeClickStatus = inputRadioEl.checked;  

    inputRadioEl.onclick = function (event) {
        inputRadioEl.checked = !beforeClickStatus;  
        beforeClickStatus=!beforeClickStatus;  
        listenerCheck();  
    }

    function listenerCheck(status) {  
        console.log("🚀 ~ listenerCheck");
    }
</script>