Question

我目前有这种布局：

<div class="row">
    <div class="col-lg-12">

        <div class="input-group">
            <div class="input-group-addon">
                <input class="checkboxOption" type="checkbox">
            </div>
            <div class="form-control">Clinical Pharmacology (sub req'd)</div>
        </div><!--input-group-->

        <div class="input-group">
            <div class="input-group-addon">
                <input class="checkboxOption" type="checkbox">
            </div>
            <div class="form-control">Clinicaltrials.gov</div>
        </div><!--input-group-->
    </div>
</div>

我希望能够只需单击输入组或表单控件，然后选中嵌套在里面的复选框。

我目前在popup.js中有这个：

$(".form-control").on("touchstart", checkInside);

function checkInside(e) {
    var box = $(".input-group > .input-group-addon > .checkboxOption");
    if(box.checked){
        box.attr('checked', false);
     } else{
         box.attr('checked', true);
     }
 }

但是当我在函数中放置console.log语句时，似乎点击甚至没有注册。是否有其他方法，或其他什么？

Answer 1

我做了一个Jsfiddle here

使用：

prop('checked', false);

而不是：

box.attr('checked', false);

touchstart仅适用于移动设备（或调试模式）。

Answer 2

使用与<label>个复选框相关联的id元素可以实现您的目标。基本上将<label>包裹在您想要点击以查看复选框的所有内容上，然后添加for="checkboxID"，其中checckboxID是复选框的ID。

这里是fiddle。

Answer 3

你真的不需要jQuery或Javascript来使它工作。

示例：

<input id="checkboxID" type="checkbox" />
<label for="checkboxID">This will check/uncheck the checkbox with the ID 'checkboxID' if clicked</label>

或

<input id="checkboxID2" type="checkbox" />
<div>
   <label for="checkboxID2">This will check/uncheck the checkbox with the ID 'checkboxID2' if clicked</label>
</div>

jsFiddle

如何选中div上的复选框点击Chrome扩展程序

3 个答案: