Question

我有一个模板：

    {% if websites %}
        <h3>Delete websites:</h3>
        <div class="row">
            {% for website in websites %}
                <div class="row checkbox">
                    <h4>
                    <div class="col-md-2">
                    {{ website.name }}:
                    </div>

                    <div class="col-md-2 col-md-offset-1">
                        {{ website.url}}
                    </div>

                    <div class="col-md-1 col-md-offset-1">
                        <input type="checkbox" name="delete_website" value="{{ website.id}}">
                    </div>
                    </h4>
                </div>
            {% endfor %}

        </div>
    {% endif %}

    ...

<script type="text/javascript"> 

    $('.checkbox').click(function(){
        ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked")));
   });

</script>

创建

该行应该是可点击的，因此可以在＆＃34; webapi＆＃34;单击复选框应选中或取消选中复选框。按原样，jquery func用于名称（webapi）和url（http://..。）和3个部分之间的空格，但是取消激活单击复选框，可能是因为它使操作加倍（点击它检查它，所以我的功能取消了它）。我改为：

        <h3>Delete websites:</h3>
        <div class="row">
            {% for website in websites %}
                <div class="row">
                    <div class="checkbox">
                        <h4>
                        <div class="col-md-2">
                        {{ website.name }}:
                        </div>

                        <div class="col-md-2 col-md-offset-1">
                            {{ website.url}}
                        </div>
                    </div>

                    <div class="col-md-1 col-md-offset-1">
                        <input type="checkbox" name="delete_website" value="{{ website.id}}">
                    </div>
                    </h4>
                </div>
            {% endfor %}

        </div>
    {% endif %}

    ...

<script type="text/javascript"> 

    $('.checkbox').click(function(){
        ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked")));
   });

</script>

这次只将行中的前2个元素包装为＆＃34; .checkbox＆＃34;，现在再次点击该复选框...但点击该行的其余部分并不会更改复选框（可能是因为.find(':checkbox')不再有效）。如何在不停用单击复选框本身的情况下将此行包装为可单击？我在HTML中为不同的任务实现了这个功能，它没有点击我不喜欢的空格。我的主要目标是修复下面的JS，不要在单击框本身时仔细检查框，这样用户可以单击行中的任意位置来选中该框，但仍然可以复制/粘贴行中的任何文本。谢谢

＆＃13;

    $('.checkbox').click(function(){
        ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked")));
   });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row checkbox">
                    <h4>
                    <div class="col-md-2">
                    webapi:
                    </div>
                    
                    <div class="col-md-2 col-md-offset-1">
                        http://127.0.0.1:8001/status/
                    </div>
                    
                    <div class="col-md-1 col-md-offset-1">
                        <input type="checkbox" name="delete_website" value="2">
                    </div>
                    </h4>
                </div>

＆＃13;

Answer 1

首先，您需要更正标记。根据{{3}}＆＃34; 内容应放在列中，并且只有列可能是行的直接子项。＆＃34; 所以你的标记应该是：

<div class="row checkbox">
        <div class="col-md-4">
            <div class="clickable">
                webapi:
            </div>

        </div>
        <div class="col-md-4">
            <div class="clickable">
                http://127.0.0.1:8001/status/
            </div>
        </div>
        <div class="col-md-4">
            <div>
                <input type="checkbox" class="the-checkbox" name="delete_website" value="2">
            </div>
        </div>
    </div>

接着，你可以分配一个类，例如。可以单击要绑定点击事件的所有元素。

$(document).ready(function () {
        $(".clickable").on("click",function(){
            var theCheckBox=$(this).closest(".checkbox").find(".the-checkbox");
            theCheckBox.prop("checked",!theCheckBox.prop("checked"));

        });
    });

Answer 2

鉴于应用程序，JavaScript解决方案也很好。但是为了展示如何在整个行上放置标签并将其链接到复选框，我已经在下面做了示例。

但是有一个缺点：因为标签是行的叠加层，它会阻止鼠标访问其他行元素。这将使用户难以从行中选择文本片段。

.row {
  position: relative; 
}

label.overlay {
  /* Position inside the nearest positioned element, in this case the row. */
  position: absolute;
  /* Make it fill that parent element. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Some shade, just to show the area in this demo */
  background-color: rgba(0,0,0,0.1); 
}

<div class="row checkbox">
  <h4>
    <div class="col-md-2">
      webapi:
    </div>

    <div class="col-md-2 col-md-offset-1">
      http://127.0.0.1:8001/status/
    </div>

    <div class="col-md-1 col-md-offset-1">
      <input type="checkbox" name="delete_website" value="2" id="cb_delete_website_2">
      <label class="overlay" for="cb_delete_website_2"></label>
    </div>
  </h4>
</div>

使整行可以单击复选框功能，而无需取消激活复选框本身

2 个答案: