javascript - 如何将点击事件附加到 css 样式的复选框

Question

很难附加点击事件。我只想在用户选中复选框时进行一些计算。 选中复选框时，跨度的类在未选中时变为“已选中”和“未选中”。 不显示输入复选框，并且在选中时不应用其属性“已选中”，这使得它变得更加困难。

HTML:

<div class="checkboxBtn" style="border:1px solid blue;">
    <span class="cheked" style="width:20px;height:20px;border:1px solid red;" 
     onclick="CheckSelected();">
    </span>
    <input id="23" type="checkbox" style="border:1px solid green;"></input>
    <label>Compare Now</label>
</div>

这些都不起作用:

JS:

$(document).ready(function () {
        $(".cheked").click(function () {
            alert(".cheked");
        })
        $(".uncheked").click(function () {
            alert(".uncheked");
        })
    })
function CheckSelected() {
        alert("");
        return false;
    }

这是否不起作用，因为可能已经有一个点击事件来显示刻度图像。 如果已经存在，我如何才能在不影响现有功能的情况下完成我的任务。

Answer 1

试试这个 - 将 class 应用于 Checkbox 并绑定(bind) change 事件。

<div class="checkboxBtn" style="border:1px solid blue;">
    <span class="cheked" style="width:20px;height:20px;border:1px solid red;" 
     onclick="CheckSelected();">
    </span>
    <input id="23" class="chkBx" type="checkbox" style="border:1px solid green;"></input>
    <label>Compare Now</label>
</div>

$(document).ready(function() {    


    $('.chkBx').change(function() {
        if($(this).is(":checked")) {
         $(this).closest('span').removeAttr('class');
         $(this).closest('span').addClass('checked');
        }
        else{
         $(this).closest('span').removeAttr('class');
         $(this).closest('span').addClass('unchecked');
        }                
    });
});