Question

我希望在父div上的任何位置单击时都选中一个复选框，但是如果用户单击该div中包含的相机图像，则不会。如何“排除”该div？

jQuery(function($) {
   $("input:checkbox").on("change", function() {
      $(this).closest(".colorChange").toggleClass("checked_bg", $(this).prop("checked"));
   });
});

.checked_bg {
  background-color: #f00
}
div {
  border: 1px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkbox_296501" class="label-for-check">
   <div class="colorChange">
      <div>
         Title          
         <div style="float: right">
            <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/" >
         </div>
      </div>

      <div style="float: left; padding: 6px 6px 0 0">
         <img class="photo_dispo" src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
      </div>

      <p style="clear: both; margin-bottom: 0">
         Pellentesque sit amet placerat magna. Vestibulum diam quam, vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor risus, varius interdum ornare non, sagittis eu neque. Nunc vulputate nunc lorem, at rhoncus nisi eleifend a.
      </p>

      <div>
         <div>
            Left column
         </div>
         <div style="float: right">
            Right column
         </div>
      </div>
   </div>
</label>

Answer 1

问题出在标签上，该标签不应嵌套div和段落p。

用div替换标签，以从JS代码中获取控件并验证HTML结构，然后检查clicked元素是否不是img标签或图像容器：

jQuery(function($) {
  $(".colorChange").on("click", function(e) {
    if (e.target.getAttribute('class') === 'img_container' || e.target.tagName === 'IMG') {
      return;
    } else {
      var checkbox = $("input:checkbox", this);
      checkbox.prop("checked", !checkbox.prop("checked"));

      $(this).toggleClass("checked_bg", checkbox.prop("checked"));
      $(this).prop("checked");
    }
  });
});

.checked_bg {
  background-color: #f00
}

div {
  border: 1px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="label-for-check">
  <div class="colorChange">
    <div>
      Title
      <div style="float: right">
        <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/">
      </div>
    </div>

    <div class="img_container" style="float: left; padding: 6px 6px 0 0">
      <img src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
    </div>

    <p style="clear: both; margin-bottom: 0">
      Pellentesque sit amet placerat magna. Vestibulum diam quam, vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor risus, varius interdum ornare non, sagittis eu neque. Nunc vulputate nunc lorem, at rhoncus nisi eleifend a. Sed sit amet fermentum
      dolor. Sed et commodo ex, at sodales lorem. Cras facilisis urna non sem vestibulum sollicitudin. Maecenas dictum porta rutrum. Integer a blandit nisl. Curabitur blandit, justo in facilisis interdum, ante sapien euismod urna, nec lobortis nunc tellus
      et elit. Cras ultrices in nisl a efficitur. Proin varius, velit nec condimentum congue, urna sapien fringilla massa, a commodo eros massa et enim. Nulla convallis nisi quis lacus rhoncus ultricies.
    </p>

    <div>
      <div>
        Left column
      </div>
      <div style="float: right">
        Right column
      </div>
    </div>
  </div>
</div>

Answer 2

标签上的复选框正在更改，单击删除标签div，然后在图像div之后插入标签div，如下所示

 <div class="colorChange">
  <div>
     Title          
     <div style="float: right">
        <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/" >
     </div>
  </div>

  <div style="float: left; padding: 6px 6px 0 0">
     <img src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
  </div>
  <label for="checkbox_296501" class="label-for-check">
  <p style="clear: both; margin-bottom: 0">
  Pellentesque sit amet placerat magna. Vestibulum diam quam, 
  vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor 
  risus, varius interdum ornare non, sagittis eu neque. Nunc 
  vulputate nunc lorem, at rhoncus nisi eleifend a. Sed sit 
  amet fermentum dolor. Sed et commodo ex, at sodales lorem. 
  Cras facilisis urna non sem vestibulum sollicitudin. 
  Maecenas dictum porta rutrum. Integer a blandit nisl. 
  Curabitur blandit, justo in facilisis interdum, ante sapien 
  euismod urna, nec lobortis nunc tellus et elit. Cras 
  ultrices in nisl a efficitur. Proin varius, velit nec 
  condimentum congue, urna sapien fringilla massa, a commodo 
  eros massa et enim. Nulla convallis nisi quis lacus rhoncus 
  ultricies.
  </p>

  <div>
     <div>
        Left column
     </div>
     <div style="float: right">
        Right column
     </div>
  </div>
  </label>

只需使用以上代码更新html代码并享受：）

单击div时选中复选框，但不单击图像

2 个答案: