根据 JQueryUI 滑块的值检查单选按钮答案

【问题标题】：Check radio button depending on value of JQueryUI slider根据 JQueryUI 滑块的值检查单选按钮
【发布时间】：2013-10-29 17:52:30
【问题描述】：

我在一个页面上有几个不同行为的滑块。其中一个滑块与单选按钮集相关联。选中单选按钮时，滑块的值应更新。这是有效的。但是，我无法反过来工作-当手动移动滑块时，应选中相应值的单选按钮。

Here's a JSFiddle of the sliders.

这是我的 JS：

//When radio buttons are changed, update slider - this works
$('[name="[smoker]"]').change(function () {
      var value = this.value;
      $('#smoker').slider("value", value);
});

//When slider is changed, update radio buttons - this doesn't work. The alert event never fires.
$('#smoker').change(function () {
    alert(value)
     ($('[name="[smoker]"]').attr("value", value)).attr("checked",true);
});

这是我的标记：

 <div class="slider" id="smoker" data-begin="0" data-end="4"></div>
 <input type="radio" class="smoker_radio" name="[smoker]" value="0" id="smoker[1]">
<input type="radio" class="smoker_radio" name="[smoker]" value="1" id="smoker[2]">
<input type="radio" class="smoker_radio" name="[smoker]" value="2" id="smoker[3]">
<input type="radio" class="smoker_radio" name="[smoker]" value="3" id="smoker[4]">
<input type="radio" class="smoker_radio" name="[smoker]" value="4" id="smoker[5]">

【问题讨论】：

标签： javascript jquery jquery-ui slider radio-button

【解决方案1】：

你可以这样做：

slide: function (event, ui) {              
   $(".smoker_radio[value='"+ui.value+"']").attr("checked", true);
   //or better use .prop()
   $(".smoker_radio[value='"+ui.value+"']").prop("checked", true);
}

更新Fiddle

【讨论】：

【解决方案2】：

试试

//When slider is changed, update radio buttons 
$('#smoker').on('slidechange', function () {
     $('input[name="[smoker]"][value="' + $(this).slider('value') + '"]').prop("checked", true);
});

演示：Fiddle

【讨论】：