根據JQueryUI滑塊的值檢查單選按鈕

Question

我在頁面上有幾個不同行爲的滑塊。其中一個滑塊與一個單選按鈕組相關聯。當選中單選按鈕時，滑塊的值應該更新。這是行得通的。但是，我無法得到相反的結果 - 手動移動滑塊時，應檢查相應值的單選按鈕。

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]"> 

Answer 1

嘗試

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

演示：Fiddle

Answer 2

你可以這樣做：

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