Question

我正在使用jQuery插件radiosToSlider（http://rubentd.com/radios-to-slider/）并且需要确保检查所有单选按钮组并在它们出现时发出警报

我可以这样做，如果他们只是通过检查长度的单选按钮，但因为插件更改输入按钮我有困难

    $(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();
});

你的选择，正如我看到的那样：

与API作者联系，询问错误修复或支持此案例的预期方法
- 下行：时间：依赖作者回复
将“检查”功能附加到click类的.slider-level事件，就像API一样。
- Downnside：Brittle：该插件的未来版本可能会将行为附加到不同的选择器
将您的功能附加到广播组的click事件，并捕捉到气泡上的点击事件
- 下行：效率低下：它将检查无线电控制中的每次点击

以下是选项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);

从样式单选按钮回拨

1 个答案: