javascript - 获得 10 个随机选中的复选框

Question

我的问题是我想从 100 个复选框中选择 20 个，然后从 20 个选中的复选框中随机选择 10 个。

我已经尝试过 Math.floor(Math.random() 但没有任何运气，如果可能的话，我无法弄清楚如何将两者结合起来

（这是我的第一个问题，希望你能帮忙。谢谢）

function getValue() {
  var checks = document.getElementsByClassName('checks');
  var str = 'Selected = ' + '<br>';


  for (i = 0;
    [i] < checks.length; i++) {
    if (checks[i].checked === true) {
      str += checks[i].value + ", " + "<br>";
    }
  }
  document.getElementById("Selected").innerHTML = str + "end";
}

<button onclick="getValue()">Click me</button>
<div class="prøve">
  <div class="option">
    <input type="checkbox" class="checks" value="film & animation" />
    <label>Film & Animation</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="science" />
    <label>Science & Technology</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="art" />
    <label>Art</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="music" />
    <label>Music</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="travel" />
    <label>Travel & Events</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="sports" />
    <label>Sports</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="news" />
    <label>News & Politics</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="tutorials" />
    <label>Tutorials</label>
  </div>
</div>

<div id="Selected">All Selected</div>

标签： javascripthtml

Answer 1

也许这个？我正在使用这个洗牌https://stackoverflow.com/a/12646864/295783

const shuffleArray = array => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array }; // https://stackoverflow.com/a/12646864/295783

const getValue = () => {
  const checks = [...document.querySelectorAll('.checks:checked')];
  if (checks.length > 0)
    document.getElementById("Selected").innerHTML = `Selected = <br>
      ${shuffleArray(checks)
        .slice(0,10).map(chk => chk.value).join(", ")}`;
}
document.getElementById("getVal").addEventListener("click", getValue)

<button id="getVal">Click me</button>
<div class="prøve">
  <div class="option">
    <input type="checkbox" class="checks" value="film & animation" />
    <label>Film & Animation</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="science" />
    <label>Science & Technology</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="art" />
    <label>Art</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="music" />
    <label>Music</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="travel" />
    <label>Travel & Events</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="sports" />
    <label>Sports</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="news" />
    <label>News & Politics</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="tutorials" />
    <label>Tutorials</label>
  </div>
</div>

<div id="Selected">All Selected</div>

每个 div 一个

const shuffleArray = array => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array }; // https://stackoverflow.com/a/12646864/295783

const getValue = () => {
  const checks = [...document.querySelectorAll('.checks:checked')];
  if (checks.length > 0) {
    const list = shuffleArray(checks).slice(0,10).map(chk => chk.value);
    document.getElementById("Selected").innerHTML = `Selected = <br>${list.join(", ")}`;
    list.forEach((val,i) => document.getElementById(`div${i}`).textContent = val);
  }  
}
document.getElementById("getVal").addEventListener("click", getValue)

<button id="getVal">Click me</button>
<div class="prøve">
  <div class="option">
    <input type="checkbox" class="checks" value="film & animation" />
    <label>Film & Animation</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="science" />
    <label>Science & Technology</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="art" />
    <label>Art</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="music" />
    <label>Music</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="travel" />
    <label>Travel & Events</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="sports" />
    <label>Sports</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="news" />
    <label>News & Politics</label>
  </div>

  <div class="option">
    <input type="checkbox" class="checks" value="tutorials" />
    <label>Tutorials</label>
  </div>
</div>

<div id="Selected">All Selected</div>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>