Question

我使用最小标记进行简单测试就可以了，但是想想主要网站生成标记的东西会阻止它选择所有10个选项而不是随机选择6个选项。有人有什么想法吗？

$(".random-pick").click(function() {
  var maxAllowed = 6;
  // Count checkboxes
  var random_checkboxes = $("#content_subscribtion_ input.checkbox").size();
  // Check random checkboxes until "maxAllowed" limit reached
  while ($("#content_subscribtion_ input.checkbox:checked").size() < maxAllowed) {
    // Pick random checkbox
    var random_checkbox = Math.floor(Math.random() * random_checkboxes) + 1;
    // Check it
    $("#content_subscribtion_ input.checkbox:nth-child(" + random_checkbox + ")").prop("checked", true);
  }

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" class="random-pick">Press me</a>
<br/>
<br/>
<div id="content_subscribtion_" class="subscribtion-content">
  <form class="cm-ajax cm-ajax-full-render cm-processed-form" action="http://www.seedpantry.co.uk/" method="post" name="product_form_30" enctype="multipart/form-data">
    <input type="hidden" name="result_ids" value="cart_status*,wish_list*">
    <input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&amp;product_id=30">
    <input type="hidden" name="product_data[30][product_id]" value="30">
    <h2>Select items for your box</h2>
    <h4 class="rb-h4">You have selected <span class="rcount">0</span> out of <span class="rmax">6</span></h4>
    <p class="rb-notice"><i><strong>Note</strong>: you can change / swap your box contents each month if you want to.</i></p>
    <!--p>Can't decide? Let us help, click one: <a href="#" class="random-pick">Random Selection</a> or <a href="#" class="choose-for-me">Let us choose</a></p-->
    <p>Can't decide? Let us help, <a href="#" class="random-pick">click here</a> to randomly select box items</p>
    <div class="ty-product-block__option">
      <div class="cm-reload-30" id="product_options_update_30">
        <input type="hidden" name="appearance[show_product_options]" value="1">


        <input type="hidden" name="appearance[details_page]" value="1">
        <input type="hidden" name="additional_info[info_type]" value="D">
        <input type="hidden" name="additional_info[get_icon]" value="1">
        <input type="hidden" name="additional_info[get_detailed]" value="1">
        <input type="hidden" name="additional_info[get_additional]" value="">
        <input type="hidden" name="additional_info[get_options]" value="1">
        <input type="hidden" name="additional_info[get_discounts]" value="1">
        <input type="hidden" name="additional_info[get_features]" value="">
        <input type="hidden" name="additional_info[get_extra]" value="">
        <input type="hidden" name="additional_info[get_taxed_prices]" value="1">
        <input type="hidden" name="additional_info[get_for_one_product]" value="1">
        <input type="hidden" name="additional_info[detailed_params]" value="1">
        <input type="hidden" name="additional_info[features_display_on]" value="C">







        <div id="option_30_AOC">
          <div class="cm-picker-product-options ty-product-options" id="opt_30">

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_54">
              <label id="option_description_30_54" for="option_30_54" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Shallots: Red Sun <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>8 to 10 Shallot sets. Red Sun is perhaps the best red shallot producing 5/6 crisp, white fleshed shallots to eat.</p><p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/shallot%20red%20sun.jpg?1485886765631&quot; width=&quot;175&quot; height=&quot;130&quot; style=&quot;width: 175px; height: 130px;&quot;></p>"><i class="ty-icon-help-circle"></i></a></span>:</label>

              <input id="unchecked_option_30_54" type="hidden" name="product_data[30][product_options][54]" value="96">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_54" type="checkbox" name="product_data[30][product_options][54]" value="95" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_55">
              <label id="option_description_30_55" for="option_30_55" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Shallots: Golden Gourmet <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>8 to 10 Shallot sets. Golden Gourmet is an RHS Award winning yellow Dutch type with excellent flavour.</p><p><span></span></p>
                <p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/shallot-golden%202.jpg?1485905056927&quot; width=&quot;118&quot; height=&quot;119&quot; style=&quot;width: 118px; height: 119px;&quot;></p>
                <p>
                  <br>
                </p>"><i class="ty-icon-help-circle"></i></a>
                </span>:</label>

              <input id="unchecked_option_30_55" type="hidden" name="product_data[30][product_options][55]" value="98">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_55" type="checkbox" name="product_data[30][product_options][55]" value="97" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_56">
              <label id="option_description_30_56" for="option_30_56" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Aubergines, Sweet Peppers <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>x2 seed packets. Aubergines '<em>Jackpot'</em> grow full size or as baby aubergines &amp; Sweet Peppers<em> 'Lunchbox' - </em>small yellow, orange and red peppers.</p><p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/aubergine-jackpot%202.jpg?1485889044305&quot; width=&quot;113&quot; height=&quot;111&quot; style=&quot;width: 113px; height: 111px;&quot;> <img src=&quot;https://www.seedpantry.co.uk/images/companies/1/snack%20sweet-pepper%202.jpg?1485889068999&quot; width=&quot;113&quot; height=&quot;109&quot; style=&quot;width: 113px; height: 109px;&quot;></p><br>"><i class="ty-icon-help-circle"></i></a></span>:</label>

              <input id="unchecked_option_30_56" type="hidden" name="product_data[30][product_options][56]" value="100">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_56" type="checkbox" name="product_data[30][product_options][56]" value="99" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_57">
              <label id="option_description_30_57" for="option_30_57" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Herbs: Basil, Parsley <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>x2 seed packets. Herbs: Basil <em>'Classic Italian'</em>, Parsley<em> 'French Flat Leaf'</em></p><p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/LR_Basil_Sweet%20Genovese2.JPG?1485889215045&quot; width=&quot;100&quot; height=&quot;140&quot; style=&quot;width: 100px; height: 140px;&quot;> <img src=&quot;https://www.seedpantry.co.uk/images/companies/1/FlatLeafParsley.jpg?1485889279763&quot; width=&quot;135&quot; height=&quot;136&quot; style=&quot;width: 135px; height: 136px;&quot;></p><br>"><i class="ty-icon-help-circle"></i></a></span>:</label>

              <input id="unchecked_option_30_57" type="hidden" name="product_data[30][product_options][57]" value="102">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_57" type="checkbox" name="product_data[30][product_options][57]" value="101" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_58">
              <label id="option_description_30_58" for="option_30_58" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Herbs: Coriander, Garlic Chives <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>x2 seed packets. Herbs: Coriander <em>'Leisure'</em>, Garlic Chives</p><p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/Coriander%20Leisure.jpg?1485889513463&quot; width=&quot;112&quot; height=&quot;112&quot; style=&quot;width: 112px; height: 112px;&quot;> <img src=&quot;https://www.seedpantry.co.uk/images/companies/1/Garlic%20Chives.jpg?1485889533776&quot; width=&quot;184&quot; height=&quot;111&quot; style=&quot;width: 184px; height: 111px;&quot;></p>"><i class="ty-icon-help-circle"></i></a></span>:</label>

              <input id="unchecked_option_30_58" type="hidden" name="product_data[30][product_options][58]" value="104">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_58" type="checkbox" name="product_data[30][product_options][58]" value="103" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_59">
              <label id="option_description_30_59" for="option_30_59" class="ty-control-group__label ty-product-options__item-label">FLOWER - Nerine bowdenii Isabel <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>1 bulb. Mixed borders, containers, an excellent cut flower.<strong><span></span></strong>
                </p>
                <p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/Nerine%20Isabel.jpg?1485900430576&quot; width=&quot;136&quot; height=&quot;139&quot; style=&quot;width: 136px; height: 139px;&quot;></p>"><i class="ty-icon-help-circle"></i></a>
                </span>:</label>

              <input id="unchecked_option_30_59" type="hidden" name="product_data[30][product_options][59]" value="106">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_59" type="checkbox" name="product_data[30][product_options][59]" value="105" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_60">
              <label id="option_description_30_60" for="option_30_60" class="ty-control-group__label ty-product-options__item-label">FLOWER - Nerine bowdenii Alba <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>1 bulb. Mixed borders, containers, an excellent cut flower.</p><p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/Nerine%20Alba.jpg?1485900661265&quot; width=&quot;150&quot; height=&quot;150&quot; style=&quot;width: 150px; height: 150px;&quot;></p><br>"><i class="ty-icon-help-circle"></i></a></span>:</label>

              <input id="unchecked_option_30_60" type="hidden" name="product_data[30][product_options][60]" value="108">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_60" type="checkbox" name="product_data[30][product_options][60]" value="107" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_61">
              <label id="option_description_30_61" for="option_30_61" class="ty-control-group__label ty-product-options__item-label">FLOWER - Nerine Bowdenii Nikita <span class="ty-tooltip-block"><a class="cm-tooltip" title="1 bulb. Mixed borders, containers, an excellent cut flower.<p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/Nerine%20Nikita.jpg?1485900920186&quot; width=&quot;139&quot; height=&quot;140&quot; style=&quot;width: 139px; height: 140px;&quot;></p>"><i class="ty-icon-help-circle"></i></a></span>:</label>

              <input id="unchecked_option_30_61" type="hidden" name="product_data[30][product_options][61]" value="110">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_61" type="checkbox" name="product_data[30][product_options][61]" value="109" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_62">
              <label id="option_description_30_62" for="option_30_62" class="ty-control-group__label ty-product-options__item-label">FLOWER - Gladioli Glamourglad Mixed <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>8 corms specially bred to only grow to 60cms tall. Excellent cut flower.</p><p><span></span><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/gladioli.jpg?1485901869139&quot;
                width=&quot;157&quot; height=&quot;158&quot; style=&quot;width: 157px; height: 158px;&quot;></p>
                <p>
                  <br>
                </p>"><i class="ty-icon-help-circle"></i></a>
                </span>:</label>

              <input id="unchecked_option_30_62" type="hidden" name="product_data[30][product_options][62]" value="112">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_62" type="checkbox" name="product_data[30][product_options][62]" value="111" class="checkbox">
                            
                        </span>
              </label>



            </div>

            <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_63">
              <label id="option_description_30_63" for="option_30_63" class="ty-control-group__label ty-product-options__item-label">FLOWER - Begonia Fimbriata Mixed <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>2 tubers. Ideal plants for growing in hanging baskets,
containers and pots.</p><p><span></span></p>
                <p><img src=&quot;https://www.seedpantry.co.uk/images/companies/1/BEGONIA.jpg?1485903112158&quot; width=&quot;125&quot; height=&quot;123&quot; style=&quot;width: 125px; height: 123px;&quot;></p>
                <br>"><i class="ty-icon-help-circle"></i></a>
                </span>:</label>

              <input id="unchecked_option_30_63" type="hidden" name="product_data[30][product_options][63]" value="114">
              <label class="ty-product-options__box option-items">
                <span class="cm-field-container">
                            <input id="option_30_63" type="checkbox" name="product_data[30][product_options][63]" value="113" class="checkbox">
                            
                        </span>
              </label>



            </div>
          </div>
        </div>

        <!-- Inline script moved to the bottom of the page -->



        <!--product_options_update_30-->
      </div>

    </div>
    <div class="cm-reload-30" id="advanced_options_update_30">




      <!--advanced_options_update_30-->
    </div>

    <div class="ty-product-block__field-group">

      <div class="cm-reload-30 stock-wrap" id="product_amount_update_30">
        <input type="hidden" name="appearance[show_product_amount]" value="1">
        <div class="ty-control-group product-list-field">
          <label class="ty-control-group__label">Availability:</label>
          <span class="ty-qty-in-stock ty-control-group__item" id="in_stock_info_30">In stock</span>
        </div>
        <!--product_amount_update_30-->
      </div>





      <div class="cm-reload-30" id="qty_update_30">
        <input type="hidden" name="appearance[show_qty]" value="1">
        <input type="hidden" name="appearance[capture_options_vs_qty]" value="Y">

        <div class="ty-qty clearfix changer" id="qty_30">
          <label class="ty-control-group__label" for="qty_count_30">Quantity:</label>
          <div class="ty-center ty-value-changer cm-value-changer">
            <a class="cm-increase ty-value-changer__increase">+</a>
            <input type="text" size="5" class="ty-value-changer__input cm-amount" id="qty_count_30" name="product_data[30][amount]" value="1" data-ca-min-qty="1">
            <a class="cm-decrease ty-value-changer__decrease">−</a>
          </div>
        </div>
        <!--qty_update_30-->
      </div>





    </div>

    <!-- Inline script moved to the bottom of the page -->
    <div class="ty-product-block__button">

      <div class="cm-reload-30 " id="add_to_cart_update_30">
        <input type="hidden" name="appearance[show_add_to_cart]" value="1">
        <input type="hidden" name="appearance[show_list_buttons]" value="1">
        <input type="hidden" name="appearance[but_role]" value="big">
        <input type="hidden" name="appearance[quick_view]" value="">

        <span>
        
                    
 
    <button id="button_cart_30" class="ty-btn__primary ty-btn__big ty-btn__add-to-cart cm-form-dialog-closer ty-btn" type="submit" name="dispatch[checkout.add..30]">Order this box</button>


    


    </span>


        <!--add_to_cart_update_30-->
      </div>



    </div>

  </form>
</div>

Answer 1

您必须将所有复选框存储到一个数组中，每次从该数组中选择一个随机复选框，将其从数组中删除并检查它，如下所示：

$(".random-pick").click(function() {
  var maxAllowed = 6;

  // map the checkboxes into an array
  var checkboxes = $("#content_subscribtion_ input.checkbox").map(function() {
    return this;
  });

  // uncheck all the checkboxes
  $(checkboxes).prop("checked", false);

  /* OPTIMIZATION GOES HERE (see note bellow) */

  // repeat this maxAllowed times
  while(maxAllowed--) {
    // get a random index from the array of checkboxes
    var rand = Math.floor(Math.random() * checkboxes.length);
    // get the checkbox at that index (splice will remove it from the array as well so we won't have the chance to get the same checkbox multiple times) (splice return an array so we have to use [])
    var checkbox = checkboxes.splice(rand, 1)[0];
    // check that checkbox we just got
    $(checkbox).prop("checked", true);
  }
});

示例：

＆＃13;
＆＃13;
$(".random-pick").click(function() { var maxAllowed = 6; var checkboxes = $("#content_subscribtion_ input.checkbox").map(function() { return this; }); $(checkboxes).prop("checked", false); while(maxAllowed--) { var rand = Math.floor(Math.random() * checkboxes.length); var checkbox = checkboxes.splice(rand, 1)[0]; $(checkbox).prop("checked", true); } });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#" class="random-pick">Press me</a> <br/> <br/> <div id="content_subscribtion_" class="subscribtion-content"> <form class="cm-ajax cm-ajax-full-render cm-processed-form" action="http://www.seedpantry.co.uk/" method="post" name="product_form_30" enctype="multipart/form-data"> <input type="hidden" name="result_ids" value="cart_status*,wish_list*"> <input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&product_id=30"> <input type="hidden" name="product_data[30][product_id]" value="30"> <h2>Select items for your box</h2> <h4 class="rb-h4">You have selected <span class="rcount">0</span> out of <span class="rmax">6</span></h4> <p class="rb-notice"><i><strong>Note</strong>: you can change / swap your box contents each month if you want to.</i></p>  <p>Can't decide? Let us help, <a href="#" class="random-pick">click here</a> to randomly select box items</p> <div class="ty-product-block__option"> <div class="cm-reload-30" id="product_options_update_30"> <input type="hidden" name="appearance[show_product_options]" value="1"> <input type="hidden" name="appearance[details_page]" value="1"> <input type="hidden" name="additional_info[info_type]" value="D"> <input type="hidden" name="additional_info[get_icon]" value="1"> <input type="hidden" name="additional_info[get_detailed]" value="1"> <input type="hidden" name="additional_info[get_additional]" value=""> <input type="hidden" name="additional_info[get_options]" value="1"> <input type="hidden" name="additional_info[get_discounts]" value="1"> <input type="hidden" name="additional_info[get_features]" value=""> <input type="hidden" name="additional_info[get_extra]" value=""> <input type="hidden" name="additional_info[get_taxed_prices]" value="1"> <input type="hidden" name="additional_info[get_for_one_product]" value="1"> <input type="hidden" name="additional_info[detailed_params]" value="1"> <input type="hidden" name="additional_info[features_display_on]" value="C"> <div id="option_30_AOC"> <div class="cm-picker-product-options ty-product-options" id="opt_30"> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_54"> <label id="option_description_30_54" for="option_30_54" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Shallots: Red Sun <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>8 to 10 Shallot sets. Red Sun is perhaps the best red shallot producing 5/6 crisp, white fleshed shallots to eat.</p><p><img src="https://www.seedpantry.co.uk/images/companies/1/shallot%20red%20sun.jpg?1485886765631" width="175" height="130" style="width: 175px; height: 130px;"></p>"><i class="ty-icon-help-circle"></i></a></span>:</label> <input id="unchecked_option_30_54" type="hidden" name="product_data[30][product_options][54]" value="96"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_54" type="checkbox" name="product_data[30][product_options][54]" value="95" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_55"> <label id="option_description_30_55" for="option_30_55" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Shallots: Golden Gourmet <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>8 to 10 Shallot sets. Golden Gourmet is an RHS Award winning yellow Dutch type with excellent flavour.</p><p><span></span></p> <p><img src="https://www.seedpantry.co.uk/images/companies/1/shallot-golden%202.jpg?1485905056927" width="118" height="119" style="width: 118px; height: 119px;"></p> <p> <br> </p>"><i class="ty-icon-help-circle"></i></a> </span>:</label> <input id="unchecked_option_30_55" type="hidden" name="product_data[30][product_options][55]" value="98"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_55" type="checkbox" name="product_data[30][product_options][55]" value="97" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_56"> <label id="option_description_30_56" for="option_30_56" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Aubergines, Sweet Peppers <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>x2 seed packets. Aubergines '<em>Jackpot'</em> grow full size or as baby aubergines & Sweet Peppers<em> 'Lunchbox' - </em>small yellow, orange and red peppers.</p><p><img src="https://www.seedpantry.co.uk/images/companies/1/aubergine-jackpot%202.jpg?1485889044305" width="113" height="111" style="width: 113px; height: 111px;"> <img src="https://www.seedpantry.co.uk/images/companies/1/snack%20sweet-pepper%202.jpg?1485889068999" width="113" height="109" style="width: 113px; height: 109px;"></p><br>"><i class="ty-icon-help-circle"></i></a></span>:</label> <input id="unchecked_option_30_56" type="hidden" name="product_data[30][product_options][56]" value="100"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_56" type="checkbox" name="product_data[30][product_options][56]" value="99" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_57"> <label id="option_description_30_57" for="option_30_57" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Herbs: Basil, Parsley <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>x2 seed packets. Herbs: Basil <em>'Classic Italian'</em>, Parsley<em> 'French Flat Leaf'</em></p><p><img src="https://www.seedpantry.co.uk/images/companies/1/LR_Basil_Sweet%20Genovese2.JPG?1485889215045" width="100" height="140" style="width: 100px; height: 140px;"> <img src="https://www.seedpantry.co.uk/images/companies/1/FlatLeafParsley.jpg?1485889279763" width="135" height="136" style="width: 135px; height: 136px;"></p><br>"><i class="ty-icon-help-circle"></i></a></span>:</label> <input id="unchecked_option_30_57" type="hidden" name="product_data[30][product_options][57]" value="102"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_57" type="checkbox" name="product_data[30][product_options][57]" value="101" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_58"> <label id="option_description_30_58" for="option_30_58" class="ty-control-group__label ty-product-options__item-label">FOOD - Grow Herbs: Coriander, Garlic Chives <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>x2 seed packets. Herbs: Coriander <em>'Leisure'</em>, Garlic Chives</p><p><img src="https://www.seedpantry.co.uk/images/companies/1/Coriander%20Leisure.jpg?1485889513463" width="112" height="112" style="width: 112px; height: 112px;"> <img src="https://www.seedpantry.co.uk/images/companies/1/Garlic%20Chives.jpg?1485889533776" width="184" height="111" style="width: 184px; height: 111px;"></p>"><i class="ty-icon-help-circle"></i></a></span>:</label> <input id="unchecked_option_30_58" type="hidden" name="product_data[30][product_options][58]" value="104"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_58" type="checkbox" name="product_data[30][product_options][58]" value="103" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_59"> <label id="option_description_30_59" for="option_30_59" class="ty-control-group__label ty-product-options__item-label">FLOWER - Nerine bowdenii Isabel <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>1 bulb. Mixed borders, containers, an excellent cut flower.<strong><span></span></strong> </p> <p><img src="https://www.seedpantry.co.uk/images/companies/1/Nerine%20Isabel.jpg?1485900430576" width="136" height="139" style="width: 136px; height: 139px;"></p>"><i class="ty-icon-help-circle"></i></a> </span>:</label> <input id="unchecked_option_30_59" type="hidden" name="product_data[30][product_options][59]" value="106"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_59" type="checkbox" name="product_data[30][product_options][59]" value="105" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_60"> <label id="option_description_30_60" for="option_30_60" class="ty-control-group__label ty-product-options__item-label">FLOWER - Nerine bowdenii Alba <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>1 bulb. Mixed borders, containers, an excellent cut flower.</p><p><img src="https://www.seedpantry.co.uk/images/companies/1/Nerine%20Alba.jpg?1485900661265" width="150" height="150" style="width: 150px; height: 150px;"></p><br>"><i class="ty-icon-help-circle"></i></a></span>:</label> <input id="unchecked_option_30_60" type="hidden" name="product_data[30][product_options][60]" value="108"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_60" type="checkbox" name="product_data[30][product_options][60]" value="107" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_61"> <label id="option_description_30_61" for="option_30_61" class="ty-control-group__label ty-product-options__item-label">FLOWER - Nerine Bowdenii Nikita <span class="ty-tooltip-block"><a class="cm-tooltip" title="1 bulb. Mixed borders, containers, an excellent cut flower.<p><img src="https://www.seedpantry.co.uk/images/companies/1/Nerine%20Nikita.jpg?1485900920186" width="139" height="140" style="width: 139px; height: 140px;"></p>"><i class="ty-icon-help-circle"></i></a></span>:</label> <input id="unchecked_option_30_61" type="hidden" name="product_data[30][product_options][61]" value="110"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_61" type="checkbox" name="product_data[30][product_options][61]" value="109" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_62"> <label id="option_description_30_62" for="option_30_62" class="ty-control-group__label ty-product-options__item-label">FLOWER - Gladioli Glamourglad Mixed <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>8 corms specially bred to only grow to 60cms tall. Excellent cut flower.</p><p><span></span><img src="https://www.seedpantry.co.uk/images/companies/1/gladioli.jpg?1485901869139" width="157" height="158" style="width: 157px; height: 158px;"></p> <p> <br> </p>"><i class="ty-icon-help-circle"></i></a> </span>:</label> <input id="unchecked_option_30_62" type="hidden" name="product_data[30][product_options][62]" value="112"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_62" type="checkbox" name="product_data[30][product_options][62]" value="111" class="checkbox"> </span> </label> </div> <div class="ty-control-group ty-product-options__item clearfix" id="opt_30_63"> <label id="option_description_30_63" for="option_30_63" class="ty-control-group__label ty-product-options__item-label">FLOWER - Begonia Fimbriata Mixed <span class="ty-tooltip-block"><a class="cm-tooltip" title="<p>2 tubers. Ideal plants for growing in hanging baskets, containers and pots.</p><p><span></span></p> <p><img src="https://www.seedpantry.co.uk/images/companies/1/BEGONIA.jpg?1485903112158" width="125" height="123" style="width: 125px; height: 123px;"></p> <br>"><i class="ty-icon-help-circle"></i></a> </span>:</label> <input id="unchecked_option_30_63" type="hidden" name="product_data[30][product_options][63]" value="114"> <label class="ty-product-options__box option-items"> <span class="cm-field-container"> <input id="option_30_63" type="checkbox" name="product_data[30][product_options][63]" value="113" class="checkbox"> </span> </label> </div> </div> </div>   </div> </div> <div class="cm-reload-30" id="advanced_options_update_30">  </div> <div class="ty-product-block__field-group"> <div class="cm-reload-30 stock-wrap" id="product_amount_update_30"> <input type="hidden" name="appearance[show_product_amount]" value="1"> <div class="ty-control-group product-list-field"> <label class="ty-control-group__label">Availability:</label> <span class="ty-qty-in-stock ty-control-group__item" id="in_stock_info_30">In stock</span> </div>  </div> <div class="cm-reload-30" id="qty_update_30"> <input type="hidden" name="appearance[show_qty]" value="1"> <input type="hidden" name="appearance[capture_options_vs_qty]" value="Y"> <div class="ty-qty clearfix changer" id="qty_30"> <label class="ty-control-group__label" for="qty_count_30">Quantity:</label> <div class="ty-center ty-value-changer cm-value-changer"> <a class="cm-increase ty-value-changer__increase">+</a> <input type="text" size="5" class="ty-value-changer__input cm-amount" id="qty_count_30" name="product_data[30][amount]" value="1" data-ca-min-qty="1"> <a class="cm-decrease ty-value-changer__decrease">−</a> </div> </div>  </div> </div>  <div class="ty-product-block__button"> <div class="cm-reload-30 " id="add_to_cart_update_30"> <input type="hidden" name="appearance[show_add_to_cart]" value="1"> <input type="hidden" name="appearance[show_list_buttons]" value="1"> <input type="hidden" name="appearance[but_role]" value="big"> <input type="hidden" name="appearance[quick_view]" value=""> <span> <button id="button_cart_30" class="ty-btn__primary ty-btn__big ty-btn__add-to-cart cm-form-dialog-closer ty-btn" type="submit" name="dispatch[checkout.add..30]">Order this box</button> </span>  </div> </div> </form> </div>
＆＃13;
＆＃13;
＆＃13;

注意：作为优化，您可以检查maxAllowed是否大于checkboxes.length，在这种情况下，将选择所有chexbox，因此无需执行此操作随机选择将是无用的。如果您想要优化，请使用以下代码替换/* OPTIMISATION GO... */评论：

if(maxAllowed >= checkboxes.length) { // if maxAllowed is bigger than the number of checkboxes then ... $(checkboxes).prop("checked", true); // select all the checkboxes return; // and return so the while won't be reached }

Answer 2

您的复选框不是相同DOM元素的子元素，因此您无法使用CSS :nth-child选择器。相反，使用jQuery的:eq选择器，它可以满足你的需要：

选择匹配集内索引n处的元素。

jQuery选择随机数量的复选框无法正常工作

2 个答案: