我有一个 JQueryUI 滑块。通过单击 5 个单选按钮之一来设置滑块的值,反向移动滑块选择一个单选按钮也是如此。
我想为每个单选按钮添加一个“已检查”类,该类的值等于和低于滑块的当前值,如果该类存在于更高值的单选按钮中,则删除该类-IE,我想实现在标记之后,如果滑块的值为“2”:
<div class="column size10">
<div class="slider" id="smoker" data-begin="0" data-end="4"></div>
<input type="radio" class="smoker_radio checked" name="[smoker]" value="0" id="smoker[1]"/>
<input type="radio" class="smoker_radio checked" name="[smoker]" value="1" id="smoker[2]"/>
<input type="radio" class="smoker_radio checked" 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]"/>
</div>
我将滑块的值传递给函数 checkRadio。请参阅JSFiddle。
检查这一点并将类分配给正确的单选按钮的最佳方法是什么?
- 更新 -
上面链接了一个 JSFiddle - 这是我将滑块值传递给函数 checkRadio() 的方式:
//When radio buttons are changed, update slider
$('[name="[smoker]"]').change(function () {
var value = this.value;
$('#smoker').slider("value", value);
checkRadio(value);
});
//When slider is changed, update radio buttons
$('#smoker').on('slidechange', function () {
var value = $(this).slider('value');
$('[name="[smoker]"][value="' + value + '"]').prop("checked", true);
checkRadio(value);
});
function checkRadio(val) {
var value = val;
console.log(value)
}