-1

我有一个 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)

}
4

1 回答 1

0

尝试这个

function checkRadio(val) {
  var value = val;
    $('input.smoker_radio').removeClass('checked');
    $('input.smoker_radio').each(function(){
        if( $(this).val() <= value){
            $(this).addClass('checked');
        }
    });
于 2013-10-22T10:15:13.447 回答