复选框唯一 ID 与样式脚本冲突答案

【问题标题】：checkbox unique id conflict with script for styling复选框唯一 ID 与样式脚本冲突
【发布时间】：2015-05-01 16:09:01
【问题描述】：

这是我想要达到的风格：http://jsfiddle.net/f07t3qkn/

我当前的复选框具有相同的 ID，即“级别”。下面有一个脚本可以识别执行某些任务的 id(level)，所以我不能有唯一的 id。

但是，在我想要实现的复选框样式中，每个复选框的 id 都是唯一的。这是缺点，因为如果实现了复选框样式，它不允许脚本运行。

现在，如何更改脚本，以便它可以允许复选框的唯一 ID 用于样式设置以及执行该功能。

或者脚本有没有办法识别复选框，哪个 id 以单词“level”开头而不是像“level”这样的固定 id？如果可以的话，也许我可以使用 'level_1'、'level_2' 之类的 id ......我已经厌倦了尝试这个......确切的代码会非常有帮助。提前致谢。

我当前的复选框 HTML

<ul class="box small-block-grid-1 medium-block-grid-2 large-block-grid-2">
                  <li><input type="checkbox" name="level[Primary]" id="level" class="level" value="1"><label>Primary</label></li>
                  <li><input type="checkbox" name="level[Upper Secondary]" id="level" class="level" value="3"><label>Upper Secondary</label></li>
                  <li><input type="checkbox" name="level[University]" id="level" class="level" value="5"><label>University</label></li>
                  <li><input type="checkbox" name="level[Lower Secondary]" id="level" class="level" value="2"><label>Lower Secondary</label></li>
                  <li><input type="checkbox" name="level[Pre University]" id="level" class="level" value="4"><label>Pre University</label></li>
                  <li><input type="checkbox" name="level[Other]" id="level" class="level" value="6"><label>Other</label></li>                 
              </ul>

利用 id 执行其他任务的脚本

<script>
       $("#slider1").change(function() {
       var value = $(this).val();
       sendtobox(value, $("input[type=checkbox]#level").val());
      });

    $("input[type=checkbox]#level").change(function() {  
     var selectedval = $(this).val();
     if($(this).is(":checked")) {
        var selectedtext = $(this).next().text();
        sendtobox(selectedval, $("#slider1").val());
     }
      else {
        $("th."+selectedval).remove();//controls removing from boxA

     }
    });
</script>

【问题讨论】：

ID 必须是唯一的。我建议你使用一个通用的类。
不建议根据标准为多个元素使用相同的 id。在您的情况下，您需要使用相同的名称来获取选定复选框的复选框值。

标签： javascript jquery html css checkbox

【解决方案1】：

如另一个答案中所述，id 属性必须是唯一的。

也就是说，您可以使用基于 attribute selector 的表达式在 CSS（和 jQuery）中选择类似的类或 id 值。

因此，如果您将 id 值更改为例如level1, level2, level3..你可以在 CSS 中选择所有匹配的元素：

input[type=checkbox][id^=level]{

}

在 jQuery 中，使用：

$("input[type=checkbox][id^=level]")

[attr^=value] 表示属性名为 attr 的元素，其值以“值”为前缀。

也就是说，请注意基于表达式的选择器不如普通选择器高效。通常建议为应该共享样式的每个项目提供相同的类，然后相应地选择/设置该类的样式。

考虑到这一点，并且考虑到相关复选框都有level 类，请更改

input[type=checkbox]#level

在你的 jQuery 中：

input[type=checkbox].level

这样就不需要重复的id 值了。

【讨论】：

【解决方案2】：

有几种方法可以解决您的问题：

在您的脚本中，当您想要引用多个元素时，您应该引用一个类而不是一个 ID，因为每个元素的 ID 应该是唯一的。
您可以为每个复选框添加另一个 ID。例如：id="level first_checkbox"

我相信还有更多方法，但我相信这足以解决您的问题。

【讨论】：