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]表示属性名称为attr和的元素其值以“value”为前缀。

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

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

input[type=checkbox]#level

在你的jQuery中：

input[type=checkbox].level

因此不需要重复的id值。

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

1 个答案: