There are plenty of posts about checking/unchecking checkboxes but my case is totally different. I am trying to check/uncheck checkboxes based on the filters (i.e check/uncheck checkbox(es) of visible content), and skip the rest of the checkboxes which become invisible when the filter is applied.
$('.select2-brands').on('change', function () {
if ($(".select2-brands").val() == "-1") {
$(".card-box-products").parent().show();
} else {
$(".card-box-products").parent().hide();
$(".select2-brands").find("option:selected").each(function () {
var optionValue = $(this).val();
if (optionValue) {
$(".card-box-products:contains(" + optionValue + ") ").parent().show();
} else {
$(".card-box-products").parent().show();
}
});
}
});
$('#unselect_products').on('click', function () {
if ($('div#product_box .card-box-products').css('display') != 'none') {
$('input[type="checkbox"]').prop('checked', false);
// alert('hi');
} else {
// $('input[type="checkbox"]').prop('checked', true);
$('input[type="checkbox"]').prop('checked', true);
}
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<span class="ml-2"><input type="checkbox" class="control-input" id="unselect_products" name="unselect_products" checked/><strong> Unselect Products </strong></span>
<div class="row" id="product_box"><h4 class="mt-0 mb-2 header-title col-md-12">
Products
</h4>
<div class="col-md-3">
<select class="form-control select2-brands" multiple="multiple">
<option value="-1"> Select All </option>
<option value="Hisense"> Hisense </option>
<option value="Bestron"> Bestron </option>
<option value="AEG"> AEG </option>
<option value="TIN"> TIN </option>
<option value="NEFF"> NEFF </option>
<option value="TESTING"> TESTING </option>
<option value="TESTING"> TESTING </option>
<option value="NESTRON"> NESTRON </option>
</select>
</div>
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Hisense</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="219.09" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="219.09" data-id="1119220" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Bestron</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="244.65" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="244.65" data-id="1119293" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">AEG</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="249.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="249.75" data-id="1119276" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Bestron</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="299.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="299.75" data-id="1119204" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">TIN</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="69.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="69.75" data-id="1119235" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">NOE</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="287.25" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="287.25" data-id="1119275" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">AEG</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="149.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="149.75" data-id="1119273" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">TESTING</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="124.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="124.75" data-id="1119167" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">NEFF</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="242.25" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="242.25" data-id="1119169" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">FOIL</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price :</strong><span class="ml-2"><input type="text" value="159.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="159.75" data-id="1119178" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-3 col-md-6">
<div class="card-box card-box-products widget-user" style="padding:1rem!important;">
<div class="media">
<div class="media-body overflow-hidden">
<p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">FILE</span></p>
<hr style="height: 1px;background:#e8e8e8;" class="my-2">
<p class="text-muted font-13 my-0"><strong>Price:</strong><span class="ml-2"><input type="text" value="199.75" class="product_price_field" name="product_price_field"></span></p>
<p class="text-muted font-13 my-0 d-flex"><strong>Add :</strong><span class="ml-2"><input type="checkbox" class="control-input product_add_checkbox cb_style" data-price="199.75" data-id="1119166" checked=""></span></p>
</div>
</div>
</div>
</div><!-- end col -->
</div>
I tried hard to find any solution but all went in vain. It would be a big help if you could find a solution of it.
NOTE: HTML is being rendered in the DOM of each card and I don't want to give the unique ID to each checkbox.
Aucun commentaire:
Enregistrer un commentaire