复选框唯一的ID冲突的造型

这是我想才达到的风格：http://jsfiddle.net/f07t3qkn/复选框唯一的ID冲突的造型

我目前的复选框具有相同的ID是“等级”。下面有一个脚本标识了执行特定任务的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>

来源

2015-05-01 sweety

ID必须是唯一的。我建议你使用一个普通的类。 – Satpal

根据标准，不建议对多个元素使用相同的ID。在你的情况下，你需要使用相同的名称来获取所选复选框的复选框值。 – vinayakj

你的小提琴希望每个复选框都有自己的CSS。这简直是愚蠢的。 [找到一个更好的例子]（https://www.google.com/search?q=rounded%20checkbox%20css） - 这一个使用一个CSS：http://www.cssportal.com/blog/style-checkboxes-单选按钮/ – mplungjan

正如在其他答案中指出的，id属性必须是唯一的。这就是说，你可以使用基于attribute selector的表达式在CSS（和jQuery）中选择类似的类或id值。

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

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

}

中，jQuery中，使用：

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

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

这就是说，请注意基于表达式的选择器不如普通选择器有效。一般来说，推荐给每个应该共享相同类别的项目，然后相应地选择/设计这个类别。

考虑到这一点，并考虑到相关的复选框都具有类level，改变

input[type=checkbox]#level

在你jQuery来：

input[type=checkbox].level

应该再没有必要重复值为id。

来源

2015-05-01 07:41:56 SW4

有几种方法来解决问题：

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

我敢肯定有更多的方式，但我相信这是足够好的解决您的问题。

来源

2015-05-01 07:29:11

复选框唯一的ID冲突的造型

回答

相关问题