Random select Radio button from multiple radio group

问题

I had 6 set of radio group and each group have 4 radio buttons.

function callRandom() {
    var check_group = []; // <<< Here
    var contestants = ["groupA", "groupB", "groupC", "groupD", "groupE", "groupF"];
    var contestantsNumber = contestants.length;
    var loop_number = 4;

    for (var i = 0; i < loop_number; i++) {
        var randomNumber = Math.floor(Math.random() * contestantsNumber);
        var randomWinner = contestants[randomNumber];
        // var randomWinner1 = contestants[randomNumber];
        // var x = document.getElementById("winner");
        if (!check_group.includes(randomWinner)) { // <<< check here
            console.log(randomWinner);
            check_group.push(randomWinner); // <<< add to the check_group
            var array = document.getElementsByName(randomWinner);
            // console.log(array)
            var randomNumber = Math.floor(Math.random() * 4);
            array[randomNumber].checked = true;
        } else {
            loop_number++;
        }
        console.log(array);
    }
}

Currently this code work perfectlyand it will select random 4 groups from array and random pick a radio button. But i wan only select once from the array. For example if groupA is selected, i dont wan to be picked agn.
**ps: I want display each selection. i wanna get [0] values until [3] values and display it in html. how to get the text"groupA"

as i have 6 sets of radio button groups,and i wan it to be selected 4/6 (without duplicate groupname)[![enter image description here][2]][2]

回答1:

Create an array with the selected groups and check if the group in the array or not

callRandom();

function callRandom() {
  var check_group = [];   //<<<<<<<< Here
  var contestants = ["groupA", "groupB", "groupC", "groupD", "groupE", "groupF"];
  var contestantsNumber = contestants.length;
  var loop_number = 4;
  var the_random_array = []; var the_sorted_array = []; //<<<<< the arrays
  for (var i = 0; i < loop_number; i++) {
      var randomNumber = Math.floor(Math.random() * contestantsNumber);
      var randomWinner = contestants[randomNumber];
      // var randomWinner1 = contestants[randomNumber];
      // var x = document.getElementById("winner");
     if(!check_group.includes(randomWinner)){  // <<<<<<< check here
         //console.log(randomWinner);
         check_group.push(randomWinner);    // <<< add to the check_group
         var randomNumber = Math.floor(Math.random() * 4);
         // to check the random radio use the next line
         var get_radio_value = $('input:radio[name="'+ randomWinner +'"]:eq('+ randomNumber +')').prop('checked' , true).val();
         //Next Output randomly group
         //console.log(randomWinner , get_radio_value);
         the_random_array.push(get_radio_value); // random array
     }else{
      loop_number++;
     }
  }
  // Use The Next code if you want sorted groups from groupA to groupF not random
  $('input:radio[name^=group]:checked').each(function(){
    //Next Output from groupA to groupF
    //console.log($(this).attr('name') , $(this).val());
    the_sorted_array.push($(this).val()); // sorted array
  });
  console.log('From random array :'+the_random_array[2]);
  console.log('From sorted array :'+the_sorted_array[1]);
}

.group_of_radio{
  margin : 10px;
  padding : 10px;
  background : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="group_of_radio">
  <label><input type="radio" name="groupA" value="groupa_1">GroupA _ 1</label>
  <label><input type="radio" name="groupA" value="groupa_2">GroupA _ 2</label>
  <label><input type="radio" name="groupA" value="groupa_3">GroupA _ 3</label>
  <label><input type="radio" name="groupA" value="groupa_4">GroupA _ 4</label>
</div>
<div class="group_of_radio">
  <label><input type="radio" name="groupB" value="groupb_1">GroupB _ 1</label>
  <label><input type="radio" name="groupB" value="groupb_2">GroupB _ 2</label>
  <label><input type="radio" name="groupB" value="groupb_3">GroupB _ 3</label>
  <label><input type="radio" name="groupB" value="groupb_4">GroupB _ 4</label>
</div>
<div class="group_of_radio">
  <label><input type="radio" name="groupC" value="groupC_1">GroupC _ 1</label>
  <label><input type="radio" name="groupC" value="groupC_2">GroupC _ 2</label>
  <label><input type="radio" name="groupC" value="groupC_3">GroupC _ 3</label>
  <label><input type="radio" name="groupC" value="groupC_4">GroupC _ 4</label>
</div>
<div class="group_of_radio">
  <label><input type="radio" name="groupD" value="groupD_1">GroupD _ 1</label>
  <label><input type="radio" name="groupD" value="groupD_2">GroupD _ 2</label>
  <label><input type="radio" name="groupD" value="groupD_3">GroupD _ 3</label>
  <label><input type="radio" name="groupD" value="groupD_4">GroupD _ 4</label>
</div>
<div class="group_of_radio">
  <label><input type="radio" name="groupE" value="groupE_1">GroupE _ 1</label>
  <label><input type="radio" name="groupE" value="groupE_2">GroupE _ 2</label>
  <label><input type="radio" name="groupE" value="groupE_3">GroupE _ 3</label>
  <label><input type="radio" name="groupE" value="groupE_4">GroupE _ 4</label>
</div>
<div class="group_of_radio">
  <label><input type="radio" name="groupF" value="groupF_1">GroupF _ 1</label>
  <label><input type="radio" name="groupF" value="groupF_2">GroupF _ 2</label>
  <label><input type="radio" name="groupF" value="groupF_3">GroupF _ 3</label>
  <label><input type="radio" name="groupF" value="groupF_4">GroupF _ 4</label>
</div>

来源：https://stackoverflow.com/questions/65768862/random-select-radio-button-from-multiple-radio-group

标签

javascript

html

jquery