javascript - JQuery隐藏复选框检查，但不取消检查

Question

我已经为我正在处理的网站创建了一个替换 img 复选框。我可以成功地让复选框选中，但不能取消选中。我可以在 Inspect 中看到这一变化。

代码有什么问题吗？页面中没有错误。谢谢!

HTML 是:

<input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;">
<img class="chk-img" id="AcceptTerms" onclick="CheckboxClick(this);" src="../../../wp-content/uploads/misc/notselected.png">
<span id="ts-cs-accept">I have read and accepted the terms</span>.

JS 是:

function CheckboxClick(element) {
    if(jQuery('input:checkbox[name=' + element.id + '_check]').is(":checked")) {
        jQuery('input:checkbox[name=' + element.id + '_check]').attr('checked','false');
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/notselected.png");
    } else {
        jQuery('input:checkbox[name=' + element.id + '_check]').attr('checked','true');
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/selected.png");
    };
};

Answer 1

始终将 prop 与复选框一起使用，因为您可以直接使用 true 和 false 值。您还可以大量减少代码，而不是重复复杂的 jQuery 选择器:

function CheckboxClick(element) {
    var $checkbox = jQuery('input:checkbox[name=' + element.id + '_check]')
    if($checkbox.prop("checked")) {
        $checkbox.prop('checked', false);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/notselected.png");
    } else {
        $checkbox.prop('checked', true);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/selected.png");
    };
};

这可以进一步简化，但我希望您仍然能够识别您的代码:)

例如您可以通过以下方式切换它:

$checkbox.prop("checked", !$checkbox.prop("checked"));

更新...不要在 jQuery 中使用基于属性的事件(例如 onclick=)，使用 jQuery 方式:

尝试这种方式:http://jsfiddle.net/noy45sjg/1/

jQuery('.chk-img').click(function (e) {
    var element = jQuery(this);
    var $checkbox = jQuery('input:checkbox[name=' + this.id + '_check]');
    if($checkbox.prop("checked")) {
        $checkbox.prop('checked', false);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/notselected.png");
    } else {
        $checkbox.prop('checked', true);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/selected.png");
    }
});