Question

当我点击它的相应图像时，我写了一个脚本来检查复选框。对于第一对复选框和图片，图片的ID为checkbox-img-1，复选框输入的ID为checkbox-1。对于第二对，ID为checkbox-img-2和checkbox-2，依此类推。因此，每当我点击图像时，我都想检查相应的复选框。对于少数图像，UI正在更新，但对于少数图像，它没有得到更新。有什么问题可能？我搜索了一下但是所有的问题都错误地用attr代替道具。我的脚本是纯JavaScript。我试过jQuery，但我得到了相同的bug。我发现前面没有或者没有显示的内容没有被选中。 javascript代码是：

/* Check option on image click */
        $(".option-check-img").click(function () {
            var checkbox_img_id = $(this).attr("id");
            var checkbox_id     = checkbox_img_id.replace("checkbox-img", "checkbox");
            if(document.getElementById(checkbox_id).checked)
            {
                document.getElementById(checkbox_id).checked = false;
                var d = document.getElementById(checkbox_img_id);
                d.className = "img-circle pointer";
                /*$("#checkbox_id").prop("checked", false);
                $("#checkbox_img_id").removeClass("img-border");
                console.log(document.getElementById(checkbox_id));*/
            }
            else
            {
                document.getElementById(checkbox_id).checked = true;
                var d = document.getElementById(checkbox_img_id);
                d.className += " img-border";
                /*$("#checkbox_id").prop("checked", true);
                $("#checkbox_img_id").addClass("img-border");
                console.log(document.getElementById(checkbox_id));*/
            }
        });

任何解决方案？谢谢。

Answer 1

尝试使用prop（）而不是attr（）

JQuery Script not checking check-boxes correctly

阅读文档以获取更多信息jQuery prop()。

Answer 2

            $(".option-check-img").click(function() {
            var $this = $(this);
            var checkbox_img_id = $(this).attr("id");
            var checkbox_id = checkbox_img_id.replace("checkbox-img", "checkbox");
            if ($("#" + checkbox_id + ":checked").length) {
                $("#" + checkbox_id).prop('checked', false);
                $("#" + checkbox_img_id).removeClass("img-border");
                $("#" + checkbox_img_id).addClass("img-circle pointer");
            } else {
                $("#" + checkbox_id).prop('checked', true);
                $("#" + checkbox_img_id).removeClass("img-circle pointer");
                $("#" + checkbox_img_id).addClass("img-border");
            }
        });

将您的代码转换为正确的jQuery代码。

假设： ID是您的复选框元素。

确保DOM中没有任何元素具有相同的ID。

更新了代码以删除备用类。

由于

Answer 3

你确定要为此使用js吗？你可以用css做到这一点。

＆＃13;

*, *:before,  *:after {
  font-family: sans-serif;
  box-sizing: border-box;
}

label {
  display: block;
  margin-bottom: 20px;
  cursor: pointer;
}

span:before {
  content: '';
  
  display: inline-block; 
  width: 15px;
  height: 15px;
  margin-right: 10px;
  
  background: white; /* you can place your image url here */
  border: 4px solid white;
  border-radius: 3px;
  box-shadow: 0 0 0 1px black; 
}

input {
  display: none;
}

input:checked + span:before {
  background: black;
}

＆＃13;

<label>
  <input type="checkbox">
  <span>Checkbox 1</span>
</label>
<label>
  <input type="checkbox">
  <span>Checkbox 2</span>
</label>

＆＃13;

Answer 4

有一个纯HTML解决方案（Fiddle）：

<ul><li>
  <input type="checkbox" id="checkbox-1" />
  <label for="checkbox-1"><img /></label>
</li>
<li>
  <input type="checkbox" id="checkbox-2" />
  <label for="checkbox-2"><img /></label>
</li></ul>

如果您需要在选中复选框时为图片添加样式，则可以使用css3（Fiddle）：

input:checked + label img{
  border: 1px solid black;
}

input:not(:checked) + label img{
  border: 1px solid green;
}

// If you want to hide the checkbox
input[type=checkbox] {
  display: none;
}

你应该建立你的html这样的复选框，图像是彼此相邻的。

这种方法更加优雅，并且不会使用不必要的javascript。

Answer 5

您的复选框ID不是唯一的。

具有相同ID的其他复选框将被选中/取消选中，而不是您想要使用的复选框。 getElementById / $（＆＃39;＃id＆＃39;）只返回一个首先找到的元素。

例如，在您共享选项的链接派对的ID为复选框-24 ，但ID相同，则共有三个复选框。

同样，对于ID为复选框-27 的音乐，还有3个带有该ID的复选框实例。

您的脚本是正确的，但ID不是唯一的。使id唯一或使用其他标识符或标识符组合来唯一标识您要操作的复选框。

Answer 6

问题是无限循环。没有无限循环它的工作。但我仍然想要那个无限滑块，所以我会尝试不同的东西。

javascript复选框已检查但未更新UI

6 个答案: