javascript - label 属性 onclick 函数触发了两次

Question

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

这是我的代码

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

Answer 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