作出複選框功能，整個行可點擊的，不停止複選框本身

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> 

它創建

其中行應該是點擊，所以從任何地方「 webapi「複選框點擊應選中或取消選中複選框。因爲，jQuery的功能工作在名稱（webapi）和網址（http://..），並在3個部分之間留出空白，但取消激活點擊複選框，可能是因爲它使動作加倍（單擊它檢查它，所以我的func取消選中它）。我更改爲：

 <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個元素「.checkbox」，現在點擊複選框再次工作......但點擊該行的其餘部分並沒有改變複選框（可能是因爲.find(':checkbox')不再有效）。如何將此行包裝爲可點擊而不停用點擊複選框本身？我用HTML實現了不同的任務，並且它不能用於單擊我不喜歡的空白。我的主要目標是修復下面的JS，當您單擊該框本身時不會複選框，因此用戶可以單擊該行中的任意位置以選中該框，但仍可複製/粘貼該行中的任何文本。謝謝

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

<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>

Answer 1

首先您需要更正您的標記。按照bootstrap「 內容應放在列內，只列可能是行的直接子 」 所以您的標記應該是這樣的：

<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>