使用 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 滑块以某种方式滚动我自己的滑块，但我真的不知道从哪里开始。有没有人已经做了一个插件来实现这一点？

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);
});

You can give it a try here