-3

Im creating a Survey by phone, but options have to be displayed randomly

For example:

Favorite color:

[ ] RED
[ ] BLUE
[ ] YELLOW

Another case:

[ ] BLUE
[ ] YELLOW
[ ] RED

Yet another:

[ ] YELLOW
[ ] BLUE
[ ] RED

Etc....

Has anybody done random checkboxes using JQM?

I programmed this function and it works fine on the Web, but it does not work using JQM ie. <fieldset data-role='controlgroup'>

This is my markup:

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

This is my code:

$(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');


});
4

1 回答 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>

这将使它们以半随机顺序排列（编辑：请参见下面的注释，既然您已经发布了标记，它与我的略有不同）：

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 | 直播源

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

编辑：现在您已经发布了标记，我看到您正在使用idandfor来关联inputandlabel元素，而不是包含。遏制在 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);
}

实时复制| 直播源

于 2013-05-28T14:30:15.480 回答