呼叫从风格的单选按钮

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);