We Keep Coding

How to check and uncheck all of specific accordion only?

Here I have a dynamic list of accordion. Inside accordion there are checkboxes. I want to check all the checkboxes of only particular accordion if check all is clicked. Now it is checking checkbox from all accordion if all is clicked.
html
{% for u in users %}
<div>
<a data-toggle="collapse" data-target="#collapse{{u.id}}" aria-expanded="false" aria-controls="collapse">
{{u.name}}</a>
</div>
<div id="collapse{{u.id}}" class="collapse" aria-labelledby="one" data-parent="#accordion">
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all' class="all" id="check{{u.id}}">
<label class="custom-control-label" for="check{{u.id}}">Check All</label>
</div>
</div>
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all' class="all" id="check{{u.id}}">
<label class="custom-control-label" for="check{{u.id}}">One check</label>
</div>
</div>
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all' class="all" id="check{{u.id}}">
<label class="custom-control-label" for="check{{u.id}}">Two check</label>
</div>
</div>
</div>
{% endfor %}
script
$('.all').click(function(event) {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});

You can use $(this).closest(".collapse").find(':checkbox') to find all checkbox inside that div and make them check/uncheck.
Demo Code :
$('.all').click(function(event) {
var this_ = this
//get closest collpse class and find all checkbox inside it
var selector = $(this).closest(".collapse").find(':checkbox').not(this)
selector.each(function() {
this.checked = this_.checked ? true : false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="collapse1" class="collapse" aria-labelledby="one" data-parent="#accordion">
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all' class="all" id="check{{u.id}}">
<label class="custom-control-label" for="check1">Check All</label>
</div>
</div>
<div class="col-3">
<div class="my-checkbox">
<!--remove that all class from other checkboxes.. also remove duplicate ids..=--->
<input type="checkbox" name='all'>
<label class="custom-control-label" for="check1">One check</label>
</div>
</div>
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all'>
<label class="custom-control-label" for="check1">Two check</label>
</div>
</div>
</div>
<div id="collapse2" class="collapse" aria-labelledby="one" data-parent="#accordion">
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all' class="all" id="check2">
<label class="custom-control-label" for="check1">Check All</label>
</div>
</div>
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all'>
<label class="custom-control-label" for="check2">One check</label>
</div>
</div>
<div class="col-3">
<div class="my-checkbox">
<input type="checkbox" name='all'>
<label class="custom-control-label" for="check2">Two check</label>
</div>
</div>
</div>

Find all the checkboxes inside html

I am generating a dynamic form. Upon adding checkboxes the following HTML is generated:
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item"
value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item"
value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>
I need to get all the checkboxes inside the HTML and use their data attribute, I have tried to use this:
var checkboxes = $('.selected_checkboxes :checkbox');
Then I loop on the checkboxes, but that did not work.
Can someone please advise to help me sort it out

Without (POJS) or with JQuery:
// POJS
document.querySelectorAll(".selected_checkboxes .checkbox_item")
.forEach( cb => console.log(`data-id: ${cb.dataset.id}`) );
// JQuery
$(".selected_checkboxes :checkbox")
.each( (i, cb) => console.log(`data-id: ${cb.dataset.id}`) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item" value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item" value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>

JQuery - Hiding/Showing items on form based on checkbox/select

I am hiding inputs on my modal form. I am using both a select dropdown and a checkbox. My code is working fine but I want to better understand what I have done as I am still new to JQuery.
For the checkbox the code works fine without calling the function once the modal is opened however for the select to work I have to call the code once the modal is open. I want to better understand why this is the case. Thanks!
Code below:
//select change
$('#modal-track').on('shown.bs.modal', function() {
$('#track_type').change(function() {
if ($('#track_type').val() == 'Source') {
$('.mfnswitch').show();
} else {
$('.mfnswitch').hide();
}
});
});
//checkbox change
function valueChanged() {
if (
$('.checkboxinput').is(':checked') &&
$('input[name=budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (!$('.checkboxinput').is(':checked') &&
!$('input[name=budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
if (!$('.checkboxinput').is(':checked') &&
$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (
$('.checkboxinput').is(':checked') &&
!$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
<div class="form-row ">
<div class="col-md-3 mb-0">
<div id="div_id_track_type" class="form-group">
<label for="track_type" class=" requiredField">
Track type<span class="asteriskField">*</span> </label>
<div class="">
<select name="track_type" class="track_type select form-control" id="track_type">
<option value="Source" selected="">Source</option>
<option value="Library">Library</option>
<option value="Original Composition">Original Composition</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-row form-row">
<div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
<div class="custom-control custom-switch">
<div class="form-group">
<div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
MFN
</label> </div>
</div>
</div>
</div>
<div class="col-md-10 mb-0 mfnhide" id="mfnhide">
<div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
Budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
</div>
</div>
<div class="col-md-4 mb-0 hidden" id="hidden">
<div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
Sync budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
</div>
</div>
<div class="col-md-6 mb-0 hidden" id="hidden">
<div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
Master budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
</div>
</div>
</div>
<div class="form-row ">
<div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">
</div>
</div>
</form>

jquery toggle function is not working

I am making a form which is toggle (hide and show) with the help of button, but it is not working. Can anyone please review my code and tell why my script is not working. my code is below
$(document).ready(function () {
$("#add_facility").click(function () {
$("#facility-form").toggle('slow');
});
});
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i>
Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
</div>
</div>
</form>
</div>

You're selecting by id, but your form has a class, not an id; see ***:
$(document).ready(function() {
$("#add_facility").click(function() {
$(".facility-form").toggle('slow'); // ***
});
});
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i> Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Parking
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Indoor Pool
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Family Rooms
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Smoking Rooms
</label>
</div>
</div>
</div>
</form>
</div>

You need to use the class selector not an ID selector
Change this line from,
$("#facility-form").toggle('slow');
To
$(".facility-form").toggle('slow');
Here is an working Fiddle : https://jsfiddle.net/pz6h4g7q/
Hope this helps!

this is mistake
$("#facility-form").toggle('slow');
change to
$(".facility-form").toggle('slow');

Change this:
$("#facility-form").toggle('slow');
to
$(".facility-form").toggle('slow');
facility-form is a class, not an ID.

Checking a checkbox using jquery from another div using prop()

I don't know why this is not working. I tried the same way as seen in some of the stackflow solutions but still not getting the image as well as the checkbox response.
<form>
<div class="col s12">
<div style="display:none">
<label for="Type">Type</label>
<input type="hidden" id="Type">
<div class="checkbox">
<input type="checkbox" id="Type1" checked="false" name="Type[]" value="1">
<label for="Type1">Fruits</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type2" checked="false" name="Type[]" value="2">
<label for="Type2">Vegetables</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type3" checked="false" name="Type[]" value="3">
<label for="Type3">Pulses</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type4" checked="false" name="Type[]" value="4">
<label for="Type4">SeaFoods</label>
</div>
</div>
<p>Food types</p>
<ul>
<li class="unchkd"><span class="food-icons fruit"></span> <span class="iconname">Fruits</span></li>
<li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li>
<li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li>
<li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li>
</ul>
</div>
</div>
</form
JQuery for this:
$(document).ready(function(){
$("span.food-icons.fruit").click(function(){
if($(".checkbox #Type1").prop("checked") == false){
$('.checkbox #Type1').prop('checked', true);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)";
}
else{
$('.checkbox #Type1').prop('checked', false);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)";
}
});
});

Your clicking span.iconname not span.food-icons. wrap .iconname in .food-icons
You are also missing a closing bracket on you $.css selector.
$(document).ready(function(){
$(".food-icons.fruit>.iconname").click(function(){
console.log("click");
if($(".checkbox #Type1").prop("checked") == false){
$('.checkbox #Type1').prop('checked', true);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)");
}
else{
$('.checkbox #Type1').prop('checked', false);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s12">
<div style="display:inherit">
<label for="Type">Type</label>
<input type="hidden" id="Type">
<div class="checkbox">
<input type="checkbox" id="Type1" checked="false" name="Type[]" value="1">
<label for="Type1">Fruits</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type2" checked="false" name="Type[]" value="2">
<label for="Type2">Vegetables</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type3" checked="false" name="Type[]" value="3">
<label for="Type3">Pulses</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type4" checked="false" name="Type[]" value="4">
<label for="Type4">SeaFoods</label>
</div>
</div>
<p>Food types</p>
<ul>
<li class="unchkd"><span class="food-icons fruit"> <span class="iconname">Fruits</span></span></li>
<li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li>
<li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li>
<li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li>
</ul>
</div>
</div>