複選框唯一的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衝突的造型

回答

相關問題