javascript - 如何在div上单击chrome扩展名中的复选框

我目前有这样的布局：

<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语句时，似乎点击甚至没有注册。还有其他方法吗？

最佳答案

我做了一个Jsfiddle here

采用 ：

prop('checked', false);

代替 ：

box.attr('checked', false);

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

关于javascript - 如何在div上单击chrome扩展名中的复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25728594/