使用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