呼叫從風格的單選按鈕

Question

我使用jQuery插件radiosToSlider（http://rubentd.com/radios-to-slider/）回來，需要確保所有單選按鈕組進行檢查，並給予警告，當他們

我能做到這一點，如果他們通過檢查長度，但由於該插件改變輸入按鈕我有困難

只是單選按鈕

我的小提琴是 http://jsfiddle.net/yFaAj/270/

$(document).ready(function() { 
    $(".radios").radiosToSlider(); 
}); 


$(":radio").change(function() { 
    var names = {}; 
    $(':radio').each(function() { 
     names[$(this).attr('name')] = true; 
    }); 
    var count = 0; 
    $.each(names, function() { 
     count++; 
    }); 
    if ($(':radio:checked').length === count) { 
     alert("all answered"); 
    } 
}).change(); 

感謝

Answer 1

問題不是插件改變你的結構（儘管它確實添加了一些ins元素，我不同意），而是插件不會爲轉換後的無線電控件觸發change事件，並以交互方式設置checked屬性似乎也不這樣做。

由於插件作者沒有發佈這個用例的API，所以很難知道這是設計還是疏忽，但是當單擊滑塊時源代碼肯定不會觸發該事件：

this.bearer.find('.slider-level').click(function(){ 
    var radioId = $(this).attr('data-radio'); 
    slider.bearer.find('#' + radioId).prop('checked', true); 
    slider.setSlider(); 
}); 

您的選擇，因爲我看到他們：

1. 聯繫API作者，並要求bug修復，或者預期的方式來支持這種情況下
   • 缺點：時間：取決於AUT hor迴應
2. 將您的「檢查」功能附加到.slider-level類的click事件中，如API所做的那樣。
   • 缺點：脆性：插件的未來版本可能附加的行爲，以不同的選擇
3. 附上您的函數將click事件的單選按鈕組，並捕獲點擊事件對泡沫
   • 下行：低效：它會檢查在無線電控制

這裏的每一個點擊的OPTI的樣本實現on 3. DEMO。

$(document).ready(function() { 
    $(".radios").radiosToSlider(); 
}); 

var makeIsRadioGroupChecked = function(selector) { 
    var $radioGroup = $(selector); 
    return function isRadioGroupChecked() { 
    return $radioGroup.find(':checked').length > 0; 
    }; 
}; 

var isOptionsChecked = makeIsRadioGroupChecked('#optionsRadioGroup'); 

var isSizeChecked = makeIsRadioGroupChecked('#sizeRadioGroup'); 

var areAllGroupsChecked = function() { 
    return isOptionsChecked() && isSizeChecked(); 
}; 

var alertIfAllGroupsChecked = function() { 
    if (areAllGroupsChecked()) { 
    alert("all answered"); 
    } 
}; 

$('.radios').on('click', alertIfAllGroupsChecked);