使用JQuery檢查隨機複選框

我知道如何使用ID和CLASS來檢查和取消選中特定的複選框。但我想隨機選擇10複選框使用Jquery。使用JQuery檢查隨機複選框

我會每次有100,40或XX號的複選框。（HTML複選框）它可能是100複選框或50複選框或其他東西。每次都會有所不同。

我想在按下按鈕時隨機選中10個複選框。用戶可以手動選擇這10個複選框。或者他們只需按下隨機按鈕。

我正在使用Jquery。

$(':checkbox:checked').length;

但我想找到所有複選框的長度，我想檢查10個隨機複選框。

來源

2012-08-17 Mahesh

你有什麼累了嗎？ – Shreedhar 2012-08-17 10:35:33

隨機播放您的「複選框」並選取前10個複選框。 – 2012-08-17 10:39:17

你在找這樣的事嗎？

http://jsfiddle.net/qXwD9/

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

    <script> 
     //Creating random numbers from an array 
     function getRandomArrayElements(arr, count) { 
      var randoms = [], clone = arr.slice(0); 
      for (var i = 0, index; i < count; ++i) { 
       index = Math.floor(Math.random() * clone.length); 
       randoms.push(clone[index]); 
       clone[index] = clone.pop(); 
      } 
      return randoms; 
     } 

     //Dummy array 
     function createArray(c) { 
      var ar = []; 
      for (var i = 0; i < c; i++) { 
       ar.push(i); 
      } 
      return ar; 
     } 

     //check random checkboxes 
     function checkRandom(r, nodeList) { 
      for (var i = 0; i < r.length; i++) { 
       nodeList.get(r[i]).checked = true; 
      } 
     } 

     //console.log(getRandomArrayElements(a, 10)); 

     $(function() { 

      var chkCount = 100; 
      //this can be changed 

      var numberOfChecked = 10; 
      //this can be changed 

      var docFrag = document.createElement("div"); 

      for (var i = 0; i <= chkCount; i++) { 
       var chk = $("<input type='checkbox' />"); 
       $(docFrag).append(chk); 
      } 

      $("#chkContainer").append(docFrag); 

      $("#btn").click(function(e) { 

       var chks = $('input[type=checkbox]'); 

       chks.attr("checked", false); 

       var a = createArray(chkCount); 
       var r = getRandomArrayElements(a, numberOfChecked); 

       //console.log(r); 

       checkRandom(r, chks); 
      }); 

     }); 
    </script> 

</head> 
<body>   

    <div id="chkContainer"></div> 
    <div> 
     <input type="button" id="btn" value="click" /> 
    </div> 

</body>

來源

2012-08-17 12:14:41 Aneesh

如何：

工作例如：http://jsfiddle.net/MxGPR/23/

HTML：

<button>Press me</button> 
<br/><br/> 
<div class="checkboxes"> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
</div>

JAVASCRIPT（所需的JQuery）：

$("button").click(function() { 
    // How many to be checked? 
    var must_check = 10; 
    // Count checkboxes 
    var checkboxes = $(".checkboxes input").size(); 
    // Check random checkboxes until "must_check" limit reached 
    while ($(".checkboxes input:checked").size() < must_check) { 
     // Pick random checkbox 
     var random_checkbox = Math.floor(Math.random() * checkboxes) + 1; 
     // Check it 
     $(".checkboxes input:nth-child(" + random_checkbox + ")").prop("checked", true); 
    } 
});

來源

2012-08-17 12:18:15 Tom

DOM操作非常昂貴。如何減少must_check爲每個迭代和循環，直到它爲0？ – 2012-08-17 12:23:57

@Jorgen：使用這種方法不會工作，因爲返回的隨機數可能與已經檢查過的項目相匹配。換句話說，並不是每個循環都會導致檢查。 – Tom 2012-08-17 12:26:02

使用JQuery檢查隨機複選框

回答

相關問題