javascript - 从样式单选按钮回调

Question

我正在使用 jQuery 插件 radiosToSlider ( http://rubentd.com/radios-to-slider/ )，需要确保所有单选按钮组均已选中，并在选中时发出警报

如果它们只是单选按钮，我可以通过检查长度来做到这一点，但因为插件更改了输入按钮，我遇到了困难

我的 fiddle 是 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，因此很难知道这是设计使然还是疏忽，但源代码绝对不会在单击 slider 时触发事件:

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

据我所知，您的选择是:

1. 联系 API 作者并请求修复错误或支持此案例的预期方式
   • 缺点:时间:取决于作者的回应
2. 将“检查”函数附加到 .slider-level 类的 click 事件，就像 API 所做的那样。
   • 缺点:脆弱:插件的 future 版本可能会将行为附加到不同的选择器
3. 将您的函数附加到单选按钮组的 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);