Активировать флажок при нажатии на элемент

Question

Когда я нажимаю на элемент, он должен (только) активировать / поставить галочку, но он не работает.

HTML:

<input type="checkbox" id="collapsible" name="collapsible" /> <br />
<p class="member">
Activate Checkbox
</p>

Javascript :

$(".member").on("click", function() { 
    $('input[id $=collapsible]').attr('checked', this.checked); 
});

http://jsfiddle.net/et7uym09/

Answer 1

Я немного изменил ваш код, вы уже получили правильную базу.

this.checked не определено в этом контексте, поэтому вы вручную установили его в значение true.

$(".member").on("click", function() { 
    $('#collapsible').attr('checked', true); 
});

также вы можете использовать $('#collapsible').attr('checked', true); вместо $('input[id $=collapsible]').attr('checked', true);

, работающего здесь jsfiddle: http://jsfiddle.net/zsL15wog/5/

, если вы хотите переключить проверенное состояние флажка сделайте что-то вроде этого:

$(".member").on("click", function() {
    var isChecked = $('#collapsible').prop('checked');
    $('#collapsible').attr('checked', !isChecked); 
  });

fiddle: http://jsfiddle.net/zsL15wog/4/

Надеюсь, я смогу прояснить ситуацию немного подробнее :) Если у вас есть другие проблемы с этим код, дайте мне знать.

Answer 2

А как же <label>? Ничего лишнего (если вы не хотите немного стилизовать текст).

<label for="collapsible" style="cursor: pointer;">
    Activate Checkbox
    <input type="checkbox" id="collapsible" name="collapsible" />
<label>

Answer 3

    $(".member").on("click", function() { 
    $('#collapsible').attr('checked',true); 
});

Пожалуйста, попробуйте вышеуказанный код