如何根据复选框从多个数组中获取随机项？

Question

我只想显示用复选框选中的数组中的文本（所以，如果我只想要 txt 和运行，它只显示那些数组中的选项）

function myFunc() {
  let txt = ["txt1", "txt2", "txt3"];
  let test = ["test1", "test2", "test3"];
  let ran = ["ran1", "ran2", "ran3"];

  let tst = txt[Math.floor(Math.random() * txt.length)] + "<br><br><br>" + test[Math.floor(Math.random() * test.length)] + "<br><br><br>" + ran[Math.floor(Math.random() * ran.length)];
  document.getElementById("tst").innerHTML = tst;
}

<input type="checkbox"> txt<br>
<input type="checkbox"> test<br>
<input type="checkbox"> ran
<br>
<br>

<button onclick="myFunc()">One Character</button>

<p id="tst">
  sum text lol
</p>

代码：https://jsfiddle.net/RoseLovesGreene/ps17u8yd/6/

我还希望能够以运行dom 顺序显示它，这样每个数组 就不会 有自己的行。

Answer 1

您可以使用 if 子句来确定复选框是否被选中。然后，如果选中，则使用随机数作为数组的键，然后可以将其附加到结果中。

 function myFunc() {
     

     let txt = ["txt1", "txt2", "txt3"];
     let test = ["test1", "test2", "test3"];
     let ran = ["ran1", "ran2", "ran3"];

     let target = document.getElementById('tst');
     
     let result = "";
     
     let txtKey = [Math.floor(Math.random() * txt.length)]
     let testKey = [Math.floor(Math.random() * test.length)]
     let ranKey = [Math.floor(Math.random() * ran.length)]
     
     
        if (document.getElementById('txt').checked) {
     result = result+txt[txtKey];
     }
     
        if (document.getElementById('test').checked) {
     result = result+test[testKey];
     }
     
        if (document.getElementById('ran').checked) {
     result = result+ran[ranKey];
     }



target.innerHTML = result;
     
     
 }

<input id="txt" type="checkbox"> <label for="txt">txt</label><br>
<input id="test" type="checkbox"> <label for="test">test</label><br>
<input id="ran" type="checkbox"> <label for="ran">ran</label>
<br>
<br>

<button onclick="myFunc()">One Character</button>

<p id="tst">
sum text lol
</p>

您可以做一些事情来使它更优雅，但我认为这个想法可行。

Answer 2

要获取复选框的值，您需要给它们实际的 values - 并且要在没有一堆 IF 语句的情况下引用数组，它们需要在类似对象的东西中被引用。

这将在循环 forEach 时从每个数组中获取随机值，但最终输出需要打乱顺序（根据您的规范）。有很多方法可以做到这一点——我抓取了一个更简洁的版本，但这里有很多可供选择的方法：How to randomize (shuffle) a JavaScript array?

function shuffle(a, b, c, d) { //array,placeholder,placeholder,placeholder
  c = a.length;
  while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d;
  return a
}

function myFunc() {
  let vars = {
    txt: ["txt1", "txt2", "txt3"],
    test: ["test1", "test2", "test3"],
    ran: ["ran1", "ran2", "ran3"]
  }

  // get the checked values into an array
  let flatArr = [];
  document.querySelectorAll('[type=checkbox]:checked').forEach(el => {
      flatArr = [...flatArr, vars[el.value][Math.floor(Math.random() * vars[el.value].length)]]
      });
    document.getElementById("tst").innerHTML = shuffle(flatArr).join(" ");
  }

<input type="checkbox" value='txt'> txt<br>
<input type="checkbox" value='test'> test<br>
<input type="checkbox" value='ran'> ran
<br>
<br>

<button onclick="myFunc()">One Character</button>

<p id="tst">
  sum text lol
</p>

Answer 3

//Object of arrays
let options = {
  txt : ["txt1", "txt2", "txt3"],
  test : ["test1", "test2", "test3"],
  ran : ["ran1", "ran2", "ran3"]
};

function myFunc() {

  //Get all checkboxes
  let checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');
  
  //array for texts from arrays
  let texts = [];
  
  //loop through selected checkboxes
  checkedBoxes.forEach(function(ele) {
  
    // select respective array from object based on checkbox value
    let cOpt = options[ele.value];
    
    // random index for texts array - to randomize array text line
    let index = Math.floor(Math.random() * checkedBoxes.length);
    
    // to make sure we didn't set a text to that index already
    while( texts[index] !== undefined ) {
      index = Math.floor(Math.random() * checkedBoxes.length);
    }
    
    // set selected array text to a random index in texts array
    texts[index] = cOpt[Math.floor(Math.random() * cOpt.length)];
    
  });

  // text.join() to covert texts array into string
  document.getElementById("tst").innerHTML = texts.join('<br><br>');

}

<input type="checkbox" value="txt"> txt<br>
<input type="checkbox" value="test"> test<br>
<input type="checkbox" value="ran"> ran<br>

<button onclick="myFunc()">One Character</button>

<p id="tst">
sum text lol
</p>

你的方法需要做一些调整。即将值设置为复选框，创建一个 js obj，所有数组都是它的属性.

确保复选框值和属性键相同。

我在代码中添加了注释，这样您就可以轻松理解每一行的用途。

如何根据复选框从多个数组中获取随机项？

How can I get a random item from multiple arrays based on a checkbox?

html

javascript

arrays

input

function