jQuery Mobile 随机显示复选框答案

【问题标题】：jQuery Mobile Randomly Display Checkboxes [closed]jQuery Mobile 随机显示复选框
【发布时间】：2013-05-23 13:41:56
【问题描述】：

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

例如：

最喜欢的颜色：

[ ] 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');


});

【问题讨论】：

-1 表示大喊大叫。
好的，您发布了一个格式错误的大喊大叫的问题。但是你为什么在你的代码 cmets 中使用 UPPER_CASE 呢？
这是我的零号，下次我会做得更好......
不，你现在应该编辑它。
@ChrisGhenea 我因格式不佳而对问题投了反对票，然后在他改进问题时删除了我的反对票。我还赞成评论“-1 大喊大叫。”。它解释了我投反对票的确切原因，所以没有理由多余。这是一个完全可以接受的反对理由：stackoverflow.com/privileges/vote-down

标签： jquery mobile random checkbox

【解决方案1】：

~~没有看到你的标记很难回答~~ （现在你已经发布了你的标记，请参阅底部的更新），但假设你使用过@复选框周围有 987654325@ 元素，它们都在一个容器中（这里我将使用 fieldset 和 data-role="controlgroup"，正如您在 cmets 中提到的那样）：

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

编辑：现在您已经发布了标记，我看到您使用id 和for 来关联input 和label 元素，而不是包含。遏制在 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

【讨论】：

谢谢朋友，我已经提交了标记
是的，您的演示运行良好，因为您没有使用 JQM，只是使用纯 JQUERY，使用
尝试您的代码，您会得到它
对不起大写，我忘了叫喊的规则:(
@AbrahamPetit：我认为 jQuery Mobile 不会改变上述情况。编辑：确实没有，我已经使用 jQuery Mobile 和 fieldset data-type="controlgroup" 在答案中添加了一个新演示。
@AbrahamPetit：（现在您已经发布了标记。）我们标记的唯一真正区别是您使用 id 和 for 而不是包含来关联 @987654340 @ 和 label 元素。在可能的情况下，遏制会更好（并且所有现代浏览器和几个旧浏览器也都支持），但以防万一你知道我不知道的移动支持，我也展示了如何按照你的方式去做。跨度>