jQuery移动随机显示复选框

我正在创建一个电话调查，但选项必须随机显示

例如:

最喜欢的颜色:

[ ] RED
[ ] BLUE
[ ] YELLOW

的另一个例子:

[ ] BLUE
[ ] YELLOW
[ ] RED

另一个:

[ ] YELLOW
[ ] BLUE
[ ] RED

等等……

有人使用JQM做随机复选框吗?

我编写了这个函数，它在Web上工作得很好，但使用JQM ie不能工作。<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');

});

~~如果没有看到你的标记~~ (现在你已经发布了你的标记，请参阅底部的更新)很难回答，但是让我们假设你已经在复选框周围使用了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>

这将把它们以半随机的顺序排列(编辑:见下面的注释，现在你已经发布了你的标记，它与我的略有不同):

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

完整示例:Live Copy | Live Source

<!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>

Edit:现在您已经发布了标记，我看到您正在使用id和for来关联input和label元素，而不是包含。Containment在IE6以外的桌面浏览器上工作得很好，但如果你知道一些我不知道的关于移动支持的事情，那么:

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

和

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

Live Copy | Live Source

相关内容

最新更新

热门标签：