stackoom
  简体   繁体   中英

jQuery selecting a random amount of checkboxes not working out

 原文  2017-02-26 23:25:03  5   2    javascript/ jquery

Question

My simple test with minimal markup works out OK but think something with the main sites generated markup is preventing it from working as its selecting all 10 options rather than a random 6 options. Anyone have any ideas? 

 $(".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>

2 answers

solution1
 1  2017-02-26 23:57:45

You'll have to store all the checkboxes into an array, and each time select a random checkbox from that array, remove it from the array and check it, like this: 

$(".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);
  }
});

Example: 

 $(".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); } }); 
 <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>

Note: as an optimization you can check if maxAllowed is greater than checkboxes.length which in this case all the chexboxes will be selected so there will be no need to do the random selecting which will be useless. If you want the optimization the replace the /* OPTIMISATION GO... */ comment with this code: 

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
}

solution2
 1 ACCPTED  2017-02-27 00:38:18

Your checkboxes are not the children of same DOM elements, so you can't use the CSS :nth-child selector. Instead, use the jQuery's :eq selector, which does what you need:

Select the element at index n within the matched set.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Jquery selecting checkboxes that are checked is not working selecting checkboxes in a div using jquery is not working in chrome but working in IE and firefox Problems selecting checkboxes with jQuery Selecting all of the checkboxes in jQuery Selecting all checkboxes with jQuery Selecting checked checkboxes out of multiple checkboxes How can I select a random amount of checkboxes? Divide / Hand out random amount Selecting a random amount of elements from array in javascript Check random checkboxes using JQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM