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

Question

这是我想要实现的样式:http://jsfiddle.net/f07t3qkn/

我当前的复选框具有相同的 id，即“level”。下面有一个脚本可以识别执行特定任务的 id(级别)，因此我不能拥有唯一的 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>

Answer 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] Represents an element with an attribute name of attr and whose value is prefixed by "value".

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

考虑到这一点，并假设相关复选框都具有 level 类，更改

input[type=checkbox]#level

在你的 jQuery 中:

input[type=checkbox].level

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