Javascript 从样式单选按钮回拨

我正在使用jQuery插件RadioToSlider（），需要确保选中了所有单选按钮组，并在它们被选中时发出警报

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

我的小提琴是

---

谢谢

问题不在于插件改变了您的结构（尽管它确实添加了一些

插件

元素，我不同意这一点），而在于插件没有为转换后的无线电控件触发

更改

事件，并且交互地设置

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作者联系，并要求修复bug，或寻求支持此案例的预期方法

• 缺点：时间：取决于作者的反应

与API一样，将“检查”函数附加到

.slider level

类的

click

事件。

• 缺点：脆弱：插件的未来版本可能会将行为附加到不同的选择器上

将您的功能附加到收音机组的

单击事件，然后捕捉气泡上的单击事件

缺点：效率低下：它会检查无线电控制的每一次点击

下面是选项3的示例实现

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

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