重新排列单选按钮列表 [英] reorder radio button list

问题描述

我有下面的单选按钮列表，它基于多项选择题，列表中的信息将被非技术用户添加，我想知道是否有一种方法可以使用，以便列表每次页面被加载时，都可以被修改。

I have the below radio button list which is based on a multiple choice question, the information in the list will be added by a non technical user, I would like to know is there a method that i can use so the the list can be suffeled, each time the page has been loaded

<fieldset id="question1">
        <div id="scenario">
            QUESTION
        </div>
        <br/><br/>
        <div>
            Please select the correct answer: 
        </div>
        <label>
            <input type="radio" name="q1" value="correct"> ANSWER ONE</input>
        </label>
        <br/>
        <label>
            <input type="radio" name="q1" value="wrong"> ANSWER TWO</input>
        </label>
        <br/>
        <label>
            <input type="radio" name="q1" value="wrong"> ANSWER THREE</input>
        </label>
        <br/>
        <br/>
        <div id="result"></div>
        <br/><br/>
        <button type="button" id="answer" class="check" onclick="mark();" >Submit</button>
    </fieldset>

推荐答案

试试这个...

1. 您需要在一个div下添加所有标签。
   
   

1. You need to add all labels under one div.

 <div class="list">
     <label>
          <input type="radio" name="q1" value="correct"> ANSWER ONE </input>
           <br />
      </label>
      <label> <input type="radio" name="q1" value="wrong"> ANSWER TWO </input>
       <br />
      </label>        

     <label>
      <input type="radio" name="q1" value="wrong"> ANSWER THREE </input>
      <br/>
    </label>
</div>

在shuffle.js文件中添加以下代码

Add following code in new shuffle.js file

  (function($){

   $.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

}; 
  })(jQuery);

调用shuffle.js文件在脚本标记中添加以下代码行来洗牌

call to shuffle.js file Add following line of code in script tag to shuffle

 <script>
 $(document).ready(function(){
    $( '.list label' ).shuffle();
  });
 </script>

这篇关于重新排列单选按钮列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！