选中了 javascript 复选框但未更新 UI

Question

我编写了一个脚本来检查复选框，当我单击它的相应图像时。 图像的 ID 类似于 checkbox-img-1，复选框输入的 ID 类似于 checkbox-1，用于第一对复选框和图像。第二对 id 是 checkbox-img-2 和 checkbox-2 等等。 因此，每当我单击图像时，我都想选中相应的复选框。对于少数图像，UI 正在更新，但对于少数图像，它没有得到更新。 可能的问题是什么？我搜索了一下，但所有问题都犯了用 attr 代替 prop 的错误。 我的脚本是纯javascript。我尝试使用 jQuery，但我遇到了同样的错误。 我发现没有选择不存在或尚未显示在前面的内容。 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

您确定要为此使用 js 吗？只需使用 css 即可。

*, *: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;
}

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

Answer 3

有一个纯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 4

            $(".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 5

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

具有相同 id 的不同复选框被选中/取消选中，而不是您要操作的复选框。 getElementById / $('#id') 将只返回它首先找到的一个元素。

例如，在您分享的链接中，选项 Party 的 id 为 checkbox-24 但具有相同 id 的复选框共有三个。 p>

对于 ID 为 checkbox-27 的 Music 类似，同样有 3 个具有该 ID 的复选框实例。

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

Answer 6

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