Question

我通过电话创建调查，但必须随机显示选项

例如：

最喜欢的颜色：

[ ] RED
[ ] BLUE
[ ] YELLOW

另一个案例：

[ ] BLUE
[ ] YELLOW
[ ] RED

又一个：

[ ] YELLOW
[ ] BLUE
[ ] RED

等...

有没有人使用JQM做过随机复选框？

我编写了这个函数并且它在Web上工作正常，但它不能使用JQM即。 <fieldset data-role='controlgroup'>

这是我的标记：

<fieldset data-role='controlgroup'>        
<input id ='C_1'type='checkbox' name='C_[]' value='1'><label for='C_1'>RED</label>
<input id ='C_2'type='checkbox' name='C_[]' value='2'><label for='C_2'>BLUE</label>
<input id ='C_3'type='checkbox' name='C_[]' value='3'><label for='C_3'>YELLOW</label>
</fieldset>

这是我的代码：

$(document).ready(function(){

//1. Cheate array of checkboxes HTML

var HtmCheck = new Array();

//2. Save HTML code into array    

HtmCheck[0]= $('#C_1').html();
HtmCheck[1]= $('#C_2').html();
HtmCheck[2]= $('#C_3').html();
HtmCheck[3]= $('#C_4').html();
HtmCheck[4]= $('#C_5').html();

//3. Sort array randomly, this func is tested and works fine!


for(var j, x, i = HtmCheck.length; i; j = parseInt(Math.random() * i), x = HtmCheck[--i], HtmCheck[i] = HtmCheck[j], HtmCheck[j] = x);


//4 Reasign sorted HTML

$('#C_1').html(HtmCheck[0]);        
$('#C_2').html(HtmCheck[1]);        
$('#C_3').html(HtmCheck[2]);        
$('#C_4').html(HtmCheck[3]);        
$('#C_5').html(HtmCheck[4]);

//5 Refresh checks

$("input[type='checkbox']").checkboxradio('refresh');


});

Answer 1

~~如果没有看到你的标记就很难回答~~ （现在你已经发布了你的标记，请参见底部的更新），但我们假设你已经使用了{ {1}}复选框周围的元素，它们都在一个容器中（在这里我会使用label和fieldset，如您在评论中提到的那样：

data-role="controlgroup"

这会将它们按照半随机顺序排列（编辑：请参阅下面的注释，现在您已经发布了标记，它与我的略有不同）：

<fieldset id="checkboxes" data-role="controlgroup">
<label><input type="checkbox" value="red">Red</label>
<label><input type="checkbox" value="blue">Blue</label>
<label><input type="checkbox" value="yellow">Yellow</label>
</fieldset>

完整示例：Live Copy | Live Source

var container = $("#checkboxes");
var cbs = container.children("label");
var index;
for (index = 0; index < cbs.length; ++index) {
    $(cbs[Math.floor(Math.random() * cbs.length)]).appendTo(container);
}

修改：现在您已发布标记，我发现您正在使用<!DOCTYPE html> <html> <head> <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <meta charset=utf-8 /> <title>Semi-Random Checkboxes</title> </head> <body> <fieldset id="checkboxes" data-role="controlgroup"> <label><input type="checkbox" value="red">Red</label> <label><input type="checkbox" value="blue">Blue</label> <label><input type="checkbox" value="yellow">Yellow</label> </fieldset> <script> (function($) { var container = $("#checkboxes"); var cbs = container.children("label"); var index; for (index = 0; index < cbs.length; ++index) { $(cbs[Math.floor(Math.random() * cbs.length)]).appendTo(container); } })(jQuery); </script> </body> </html>和id来关联for和{{1元素，而不是包含。收容在IE6以外的桌面浏览器上运行良好，但是如果你知道我不了解移动支持它的话，那么：

input

和

label

Live Copy | Live Source

jQuery Mobile随机显示复选框

1 个答案: