当我将带有类型复选框的输入标签放在标签内时,我在标签标签中使用了 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
最佳答案
这是更新后的代码,刚刚在标签中添加了属性并将其与底盘连接,这就成功了。
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>
关于javascript - label 属性 onclick 函数触发了两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51492204/