如何将click事件附加到css样式复选框

Question

很难附加点击事件。我只想在用户选中复选框时进行一些计算。 选中复选框后，span的类将变为“已选中”＆amp;未经检查时'未选中'。 输入复选框不显示＆amp;另外，在检查时，它的属性“已检查”也未应用，这使其更加困难。

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并绑定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');
        }                
    });
});

Answer 2

这是因为＆＃39; .click＆＃39; handler会在调用时将事件附加到选择器指定的所有匹配元素，但不会附加到future元素。即如果一个具有班级名称的元素被剔除＆＃39;稍后通过JavaScript添加，点击处理程序显然不会附加到那 因此，您应该添加一个虚拟静态类来附加处理程序。请注意，更改复选框状态后会触发附加到复选框的事件。

Answer 3

以下是更新的工作代码。

<div class="checkboxBtn">
    <span id="23_span" class="unchecked"></span>
    <input type="checkbox" id="23"></input>
    <label for="23">Compare Now</label>
</div>


<script>
$(document).ready(function () {
    $("#23").click(function () {
        CheckSelected();
    })
})

function CheckSelected() {
    if(document.getElementById('23').checked) {
        $("#23_span").removeClass("unchecked").addClass("checked");
        alert("checked");
    }
    else {
        $("#23_span").removeClass("checked").addClass("unchecked");
        alert("unchecked");
    }
}
</script>

现在您可以根据需要为span元素提供CSS。