Question

当我将带有类型复选框的输入标签放在标签内时，我会在标签标签中使用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

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

Answer 2

如果要使用类型复选框，则我希望将onclick事件添加到输入元素。像这样：

$this->form_validation->set_rules('friend_id[]','Recipients', 'required');

但是如果您不需要复选框输入类型，您可以使用yu这样的隐藏类型：

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

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

标签属性onclick函数被触发两次

2 个答案: