标签属性 onclick 函数触发了两次答案

【问题标题】：label attribute onclick function fired twice标签属性 onclick 函数触发了两次
【发布时间】：2018-12-31 16:44:08
【问题描述】：

当我将带有类型复选框的输入标签放入标签内时，我在标签标签中使用了 onclick 属性，它会触发两次，但是一旦我将类型更改为无线电，它就可以正常工作。

这是我的代码

function checkUncheck(el) {
  var input = $(el).find("input");
  console.log(input);
  alert("TESt");
  // console.log("input:", input);
  // console.log('$(input).parent("div").hasClass("opacity")', $(input).closest("div.config-box").hasClass("opacity"));

  var isClickable = $(input).closest("div.config-box").hasClass("opacity");

  if (isClickable != true) {
    if (input.attr("type") == "radio") {
      $(el).closest(".form-group").find("input[name='" + input.attr("name") + "']").closest(".img-check").removeClass("check").find('input').prop('checked', false);
      $(el).addClass('check').find('input').prop('checked', true).change();
    } else {
      if ($(el).hasClass("check")) {
        $(el).removeClass("check").find("input").prop("checked", false);
      } else {
        // alert("TEST");
        // el.classList.add("check");
        $(el).addClass("check").find("input").prop("checked", true);
        console.log($(el));
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="img-check" onclick="checkUncheck(this)">
 <div class="bg-img" style="background-image: url('http://www.fujifilm.com.my/Products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG'); width: 20%;height: 200px;background-position: center;background-size: cover;"></div>
  <input type="checkbox" name="chassis" value="valasdfas1" style="visibility:hidden" class="hidden" autocomplete="off">
</label>

请在此处查看示例代码https://codepen.io/abdulqadir88/pen/WKjdEj

【问题讨论】：

将您的代码更改为 sn-p。似乎工作正常。
请检查更新后的代码，其中标签有一个包含背景图像的 div，并且当单击图像时复选框被隐藏，它会在我的本地系统中发出两次警报
使用for 属性将标签连接到复选框，然后通过复选框上发生的change 事件处理您需要处理的任何内容。
有否否决票？
@CBroe 成功了，谢谢请发布我会接受的答案

标签： javascript html

【解决方案1】：

这是更新后的代码，刚刚在标签中添加了属性并将其与机箱连接起来。

function checkUncheck(el) {
  var input = $(el).find("input");
  console.log(input);
  alert("TESt");
  // console.log("input:", input);
  // console.log('$(input).parent("div").hasClass("opacity")', $(input).closest("div.config-box").hasClass("opacity"));

  var isClickable = $(input).closest("div.config-box").hasClass("opacity");

  if (isClickable != true) {
    if (input.attr("type") == "radio") {
      $(el).closest(".form-group").find("input[name='" + input.attr("name") + "']").closest(".img-check").removeClass("check").find('input').prop('checked', false);
      $(el).addClass('check').find('input').prop('checked', true).change();
    } else {
      if ($(el).hasClass("check")) {
        $(el).removeClass("check").find("input").prop("checked", false);
      } else {
        // alert("TEST");
        // el.classList.add("check");
        $(el).addClass("check").find("input").prop("checked", true);
        console.log($(el));
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="img-check" for="chassis" onclick="checkUncheck(this)">
 <div class="bg-img" style="background-image: url('http://www.fujifilm.com.my/Products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG'); width: 20%;height: 200px;background-position: center;background-size: cover;"></div>
  <input type="checkbox" name="chassis" value="valasdfas1" style="visibility:hidden" class="hidden" autocomplete="off">
</label>

这是工作解决方案https://codepen.io/abdulqadir88/pen/QBvaYQ

【讨论】：

【解决方案2】：

如果您想使用类型复选框，我更愿意将 onclick 事件添加到输入元素。像这样：

<input type="checkbox" name="chassis" value="valasdfas1" style="visibility:hidden" class="hidden" autocomplete="off" onclick="checkUncheck(this)">

但如果您不需要复选框输入类型，您可以使用隐藏类型，如下所示：

 <label class="img-check" onclick="checkUncheck(this)">
     <div class="bg-img" style="background-image: url('http://www.fujifilm.com.my/Products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG'); width: 20%;height: 200px;background-position: center;background-size: cover;"></div>
     <input type="hidden" name="chassis" value="valasdfas1"  class="hidden" autocomplete="off" >
 </label>

您可以在此处找到这两种解决方案： https://codepen.io/kovtib/pen/VBbrgq?editors=1111

【讨论】：