iCheck - 設置兄弟姐妹的顏色

Question

我正在使用jQuery庫'iCheck'進行輸入，並且我試圖將標籤的顏色設置爲綠色，以便回答良好的問題。當我不使用iCheck時，一切都很完美，但是當我使用該庫時，我的腳本似乎沒有任何效果。我究竟做錯了什麼？

HTML文檔

<div class="radio" > 
    {% if answer.is_valid == True %} 
    <input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}"> 
    {% else %} 
    <input type="radio" name="question-{{ question.id }}" id="{{answer.text}}"> 
    {% endif %} 
    <label><b>{{ answer.text }}</b></label> 
</div> 

JS

$('.check').click(function() { 
    var score = 0 
    var all = $('input[id^=" "]'); 
    var checked = $('input:checked'); 
    var good = $('input:checked[id^=" "]'); 

    checked.siblings().css('color', 'red'); 
    all.siblings().css('color', 'green'); 
    good.each (function(){ 
     score += 1; 
    }) 

    alert(score); 
    score = 0; 
}); 

Answer 1

這是因爲icheck改變DOM以這樣的方式，你的原始投入甚至不可見了。檢查DOM瀏覽器看到iCheck改變了你的

<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}"> 

要

<div class="iradio_flat-pink" aria-checked="false" aria-disabled="false" style="position: relative;"> 
<input type="radio" name="question-1" id="text" style="position: absolute; opacity: 0;"> 
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"> 
</ins> 
</div> 

或類似的東西。
要更改元素，你需要使用I檢查功能來代替，並給它一個不同的類的顏色：

$('#input1').iCheck({ 
    radioClass: 'radio-green' //or something you like. 
});