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

Question

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

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

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

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

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

我当前 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>

Answer 1

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

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

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

Answer 2

如其他答案所述，id 属性必须是唯一的。

就是说，您可以使用基于 attribute selector 的表达式 select CSS（和 jQuery）中的相似 classes 或 id 值。 =23=]

因此，如果您将 id 值更改为例如level1、level2、level3..您可以 select CSS 中的所有匹配元素使用：

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

}

的，在jQuery，使用：

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

[attr^=value] Represents an element with an attribute name of attr and whose value is prefixed by "value".

也就是说，请注意，基于表达式的 selectors 不如常见的 selectors 有效。通常建议为每个应该共享相同样式的项目提供相同的 class，然后 select/style 这个 class 相应地。

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

input[type=checkbox]#level

在你的 jQuery 中：

input[type=checkbox].level

那么就不需要重复的 id 值了。

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

checkbox unique id conflict with script for styling

html

javascript

css

checkbox

jquery