-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