JQuery скрытая проверка флажка, но не снятие флажка

Question

Я создал замену img для сайта, над которым я работаю. Я могу успешно установить флажок в check, но не до uncheck. Я вижу это изменение в 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")); 

Update ... Не использовать события на основе атрибутов с 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"); 
    } 
});