Question

我在P中有一个带有类垂直选项的复选框。即使单击P，我也编写了脚本来实现复选框功能。代码是：

$(".vertical-options,.horizontal-options").click(function(event){
    var input = $(this).find('input').first();
    console.log(input);
    if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) {
        if(input.is(':checked')){
            input.prop('checked', false);
        } else {
            input.prop('checked', true);
        }
    }
 });

但是使用此逻辑单击复选框标签不起作用。我做错了什么？

Answer 1

为此，您需要使用label标记。在for标记的label属性中写入目标ID的ID。

<label for="id1">Checkbox-1</label>
<input type="checkbox" id="id1" />

<label for="id2">Checkbox-2</label>
<input type="checkbox" id="id2" />

<label for="id3">Checkbox-3</label>
<input type="checkbox" id="id3" />

如果您想使用jquery为其他标记执行此操作，请参阅示例

$("p").on("click", function(e){
    var checkbox = $(this).find(':checkbox');
    if ($(this).is(e.target))	
        checkbox.prop('checked', !checkbox.is(':checked')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    Checkbox-1
    <input type="checkbox" />
</p>
<p>
    Checkbox-2
    <input type="checkbox" />
</p>
<p>
    Checkbox-3
    <input type="checkbox" />
</p>

单击复选框标签不起作用

1 个答案: