-3

電話で調査を作成していますが、オプションをランダムに表示する必要があります

例えば：

好きな色：

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


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

完全な例:ライブコピー| ライブソース

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

編集：マークアップを投稿したので、包含ではなくand要素を関連付けるためにidandを使用しているようです。コンテインメントは IE6 以外のデスクトップ ブラウザーでうまく機能しますが、モバイル サポートについて私が知らないことを知っている場合に備えて、次のようにします。forinputlabel

<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 に答える