单击元素时激活复选框

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); 
  });

小提琴： 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); 
});

请尝试上面的代码