使用JQuery UI将单选按钮转换为滑块元素

Question

我有一个用单选按钮渲染的表单,如下所示:

<h2>How long is your hair?</h2>
<input type="radio" name="71" value="98">Short 
<input type="radio" name="71" value="99">Medium 
<input type="radio" name="71" value="100">Long 

大约有15个这样的问题,我想用滑块渲染整个表单,使用JQuery(Jquery UI似乎是最有可能的候选者).

我找到了一些用于将选择框转换为滑块的插件(例如selectToUISlider),但没有用于单选按钮.

我确信可以使用标准UI Slider以某种方式滚动我自己,但我真的不知道从哪里开始.有没有人已经插上电源来实现这一目标？

Answer 1

这是一个选项的基本结构,我不确定你的问题是如何不同的(它们都有3个选项吗？)所以造型会有所不同,只是试图展示这个概念.

我不确定每个问题包含在哪里,所以我把你的内容放在一个<div class="question">,然后给出了输入标签(对于非JS用户来说降级得更好),就像这样:

<div class="question">
  <h2>How long is your hair?</h2>
  <label><input type="radio" name="71" value="98">Short</label>
  <label><input type="radio" name="71" value="99">Medium</label>
  <label><input type="radio" name="71" value="100">Long</label>
</div>

然后一些脚本将其转换为滑块,如下所示:

$(".question").each(function() {
    var radios = $(this).find(":radio").hide();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }
    }).appendTo(this);
});

你可以在这里尝试一下