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.
Related
I am working on a quote page where the user can click on features which will be in the form text field and the user can also request a quote
here is what I did so far
<div class="buy-features-box">
<div class="box-head">
<div class="box-head-content">
<div class="package-name">
<h2>Sample features for Seller/ Vendor</h2>
</div>
<div class="select-all-btn">
<input class="btn-check check1 form-check-input" name="product" value="100" type="checkbox" onclick="totalIt()">
SELECT ALL
</div>
</div>
<div class="collapse-opener collapsed" data-toggle="collapse" data-target="#features3" aria-expanded="true" aria-controls="features3">
<i class="fas fa-plus"></i>
</div>
</div>
<div id="features3" class="collapse" aria-labelledby="features3" data-parent="#accordion1">
<div class="box-body">
<div class="features-detail">
<div class="features-list">
<ul>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Vendors Dashboard</h3>
<p>(Manage profile and password)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>List products</h3>
<p>(View list of products)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Add/ edit product page</h3>
<p>(without product variations)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Add/ edit product page</h3>
<p>(with product variations and attribute management)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Payment reports</h3>
<p>(With date filter)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order history</h3>
<p>(View order history of products)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order tracking</h3>
<p>(Track individual order via tracking number/ API)</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
here is my jquery code:
<script type="text/javascript">
$(".form-check-input").change(function() {
var abc = []; //move the array to here
$('li input[type="checkbox"]:checked').each(function() {
var $row = $(this).closest('li');
$('h3', $row).each(function(i) {
abc.push($(this).text());
})
document.getElementById("features").value = abc.join(',');
});
});
$('input:checkbox').change(function() {
var total = 0;
$('input:checkbox:checked').each(function() { // iterate through each checked element.
total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
});
$("#total").val("$" + total.toFixed(2));
});
</script>
now here I am getting values and showing them correctly in the input box of the form but if the user unchecks certain features they are not getting removed from the input field
basically I am storing values in the array "abc" on checkbox checked property but not able to remove on uncheck them.
If you move document.getElementById("features").value = abc.join(','); out of your li .each() function, then everything seems to work just fine.
Problem is that you are only updating the value of the input if there is a checked input.
Demo
$(".form-check-input").change(function() {
var abc = []; //move the array to here
$('li input[type="checkbox"]:checked').each(function() {
var $row = $(this).closest('li');
$('h3', $row).each(function(i) {
abc.push($(this).text());
})
});
document.getElementById("features").value = abc.join(',');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox"/>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order history</h3>
<p>(View order history of products)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox"/>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order history2</h3>
<p>(View order history of products)</p>
</div>
</div>
</li>
</ul>
<input id="features" />
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>
I've 7 checkboxes (A,B,C,D,E,F,G) and when I click one of them, the value is appended to a textarea. If I uncheck one, the value is removed from the textarea. The jquery code is as below:
var checkboxes = $("input[type='checkbox']");
checkboxes.on('change', function() {
$('#recipient').val(
checkboxes.filter(':checked').map(function(item) {
return this.value;
}).get().join('; ')
);
});
The html code is as below:
<div class="col-sm-5">
<div class="form-group">
<label>Recipient</label>
<textarea class="form-control" rows="5" id="recipient"></textarea>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="col-sm-5">
<label> </label>
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address Book</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="A">A
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="B">B
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="C">C
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="D">D
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="E">E
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="F">F
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="G">G
</label>
</div>
</div>
</div>
</div>
</div>
Now, here is a situation where when I click on Checkbox "C", the following checkboxes D,E,F,G should be disabled as well as if anyone of those checkboxes are already in checked state then it should uncheck and trigger the on change event (as highlighted above in the code) which will remove the value of that checked box from the textarea. I have tried to use the trigger("change") option but could not find a luck. Please help me!
Please note, in the code below I've just tried the trigger event with checkbox D alone to see if it works.
$(function(){
$(".firm[value='C']").change(function(){
$(".firm[value='D']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
});
This seems to work for me:
$(".firm[value='C']").change(function(){
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
You can see it in action here:
https://jsfiddle.net/aaronfranco/cvhphzgq/2/
I have 3 identical sections. They are the exact same as each other. What I'm trying to achieve is when I click on the ".rad1"(first radio button), it styles its label. When I click on ".rad2", it should unstylize the first radio button and stylize second radio button. I only want it to happen in its own section, aka, when I click on one section, the styles are only applied to that section, no other section.
This is what I have, but I haven't found a way to achieve it:
$('.rad1').click(function() {
$(this).parent('.label1').css('background', 'red');
});
$('.rad2').click(function() {
$(this).parent().next('.label1').css('background', 'transparent');
$(this).parent('.label2').css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
I'd do it like this:
$('input[name="rad"]').click(function() {
$(this).closest('form').find('label').css('background', 'transparent')
$(this).parent().css('background', 'red');
});
$('input[name="rad"]').click(function() {
$(this).closest('form').find('label').css('background', 'transparent')
$(this).parent().css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
It's probably also better to add and remove a class instead of styling the lables using .css().
$('.rad1').click(function(){
$(this).parent()
.css('background','red');
});
$('.rad2').click(function(){
$(this).closest('div')
.prev().find('.label1')
.css('background','transparent');
$(this).parent()
.css('background','red');
});
There are many better approaches but I follow yours :
$('.rad1').click( function() {
$(this).parent('.label1').css('background', 'red');
$('.rad2').parent('.label2').css('background', 'transparent');
});
$('.rad2').click( function() {
$(this).parent('.label2').css('background', 'red');
$('.rad1').parent('.label1').css('background', 'transparent');
});
This can also be done without javascript, purely in CSS, if you make a slight change to the structure.
I started by copying j08691's snippet, then commented out the javascript and moved the label for each radio button so it follows rather than encloses the <input>.
Once you have that changed, you can write a CSS selector to target the label if it is the sibling of a :checked radio button. Unchecked buttons will retain their inherited orange background.
/*$('input[name="rad"]').click(function() {
$(this).closest('form').find('label').css('background', 'transparent')
$(this).parent().css('background', 'red');
});*/
.form-section {
background: orange;
border: 1px solid black;
}
.form-section input[type="radio"]:checked + label {
background: red;
}
<div class="form-section">
<form action="">
<div class="first">
<input type="radio" class="rad1" name="rad">
<label for="radio" class="label1">First</label>
</div>
<div class="second">
<input type="radio" class="rad2" name="rad">
<label for="radio" class="label2">Second</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<input type="radio" class="rad1" name="rad">
<label for="radio" class="label1">First</label>
</div>
<div class="second">
<input type="radio" class="rad2" name="rad">
<label for="radio" class="label2">Second</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<input type="radio" class="rad1" name="rad">
<label for="radio" class="label1">First</label>
</div>
<div class="second">
<input type="radio" class="rad2" name="rad">
<label for="radio" class="label2">Second</label>
</div>
</form>
</div>
I have html with anchors and checkboxs. Now When user select to anchor, I want to check checkbox to closest anchor.
For example, If I click to Travel anchor Travel checkbox need to be checked and then I click to Kids anchor Kids checkbox need to be checked and add/remove active class from anchor.
In my example it is working with only first anchor selection, when you select any other anchor it will not work and not select any checkbox.
Here is my JSFiddle: http://jsfiddle.net/zaarwejy/1/
<div class="row instagram-details">
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Sports
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Photography
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Food
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Travel
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Automotive
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Fashion
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Beauty
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Youth
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Technology
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Weddings
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Adventure
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Luxury
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Provocative
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Pets
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Kids
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Architecture
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design
</div>
</div>
and jQuery code:
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if ($(':checked').length) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});
Instead of that, you can just use <label>:
$(function() {
$("input:checkbox").click(function() {
if (this.checked)
$(this).closest("label").addClass("active");
else
$(this).closest("label").removeClass("active");
});
});
label.active {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row instagram-details">
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Sports</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Photography</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Food</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Travel</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</label>
</div>
<div class="col-md-2">
<label class="active">
<input type="checkbox" id="" class="industrie_branch_option" value="">Youth</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Technology</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Pets</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Kids</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design</label>
</div>
</div>
The problem is $(':checked').length will return a truthy value if any one of the checkboxes in the page is checked
You can simplify the logic using toggling like
$(".instagram-details a").click(function () {
$(this).toggleClass('active');
$(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});
Here we first toggle the active class of the clicked anchor element, then we sets the checked state of the checkbox using whether the anchor element has the active class or not
Demo: Fiddle
Change only this:
if ($(':checked').length) {
With this
if (ele.prop("checked")) {
And it works
fiddle: http://jsfiddle.net/zaarwejy/2
There's no need of using JS, if you can restructure the HTML. You can use sibling selector and :checked property of the checkbox to change the styles of the corresponding label.
You can use label.
Demo
:checked + label {
color: red;
}
<div class="row instagram-details">
<div class="col-md-2">
<input type="checkbox" id="1" class="industrie_branch_option" value="">
<label for="1">Sports</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="2" class="industrie_branch_option" value="">
<label for="2">Health & Fitness</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="3" class="industrie_branch_option" value="">
<label for="3">Photography</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="4" class="industrie_branch_option" value="">
<label for="4">Entertainment</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="5" class="industrie_branch_option" value="">
<label for="5">Food</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="6" class="industrie_branch_option" value="">
<label for="6">Travel</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="7" class="industrie_branch_option" value="">
<label for="7">Lifestyle</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="8" class="industrie_branch_option" value="">
<label for="8">Automotive</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="9" class="industrie_branch_option" value="">
<label for="9">Fashion</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="10" class="industrie_branch_option" value="">
<label for="10">Beauty</label>
</div>
</div>
If you cannot change the HTML structure, then you need to use JS.
Your selector $(':checked').length checks if there is atleast one checked checkbox. So, when one checkbox is checked for next checkbox the code doesn't work.
To toggle the checkbox state use
ele.prop('checked', !ele.checked);
To toggle class use
$(this).toggleClass('active', ele.is(':checked'));
Updated Fiddle
$(".instagram-details a").click(function() {
var ele = $(this).closest('a').find(':checkbox');
ele.prop('checked', !ele.checked);
$(this).toggleClass('active', ele.is(':checked'));
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row instagram-details">
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Sports</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Photography</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Food</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Travel</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Youth</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Technology</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Pets</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Kids</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design</a>
</div>
</div>
Check this!
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if ($(ele).prop('checked')) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});
Change your code with following
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if (ele.prop('checked')) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});