Jquery show hide not working as expected? - javascript

I have below HTML structure and i need to show / Hide the filter elements.
My Use case is, On page load each filter group should be restricted to 3 filter elements with option to expand more on click of + button.
Same has to be done to show only top 3 filter elements on click of - button.
For Ex. I have size as filter group and filter elements as S, M, L, XL, XXL. I want to show only 3 elements on page load and rest to has to be hidden. On click of + button all the elements should be displayed.
On click of - button, only top 3 elements to be displayed(S,M,L). Below are the code sample and Jquery which i have tried but it is not coming.
$(document).ready(function() {
$(".showLess").hide();
// used to hide elements which are > 3 in numbers
$('.list-group-item label:lt(3)').next().hide();
// On click of + button need to show rest of the filter elements
$('.loadMore').click(function() {
$(".showLess").show();
$('.list-group-item label:lt(5)').next().show();
});
// On click of - button need to show only top 3 filter elements
$('.showLess').click(function() {
$(".showLess").hide();
$('.list-group-item label').closest().not(':lt(3)').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
</div>

Find within parent and slice the number you want to show or hide and then show/hide.
$(".showLess").hide();
$('.cf').each(function() {
$(this).find('.checkbox').slice(3).hide();
})
$('.loadMore').on('click', function() {
$(this).hide().next().show();
$(this).parent().find('.checkbox').show();
})
$('.showLess').on('click', function() {
$(this).hide();
$(this).prev().show();
$(this).parent().find('.checkbox').slice(3).hide();
})
$(document).ready(function() {
$(".showLess").hide();
$('.cf').each(function() {
$(this).find('.checkbox').slice(3).hide();
})
$('.loadMore').on('click', function() {
$(this).hide().next().show();
$(this).parent().find('.checkbox').show();
})
$('.showLess').on('click', function() {
$(this).hide();
$(this).prev().show();
$(this).parent().find('.checkbox').slice(3).hide();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
</div>

First issue, you are calling $(".showLess").show(); so it is selecting all of the elements with the showLess class. You do the same thing with the list. Instead of doing all this logic in the JavaScript, you can do it in CSS with adding and removing a class.
$(document).ready(function() {
$('.loadMore, .showLess').click(function() {
var btn = $(this);
var isMore = btn.hasClass("loadMore")
btn.closest(".list-group-item").toggleClass("active", isMore);
});
});
.showLess {
display: none;
}
.list-group-item > div > label {
display: block;
}
.list-group-item > div > label:nth-of-type(1n+3) {
display: none;
}
.list-group-item.active .showLess {
display: block;
}
.list-group-item.active .loadMore {
display: none;
}
.list-group-item.active > div > label:nth-of-type(1n+3) {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
</div>
If you really want to do it with JavaScript, your code would need to be something like this (untested)
$('.loadMore').click(function() {
var btn = $(this);
btn.siblings(".showLess").show();
btn.hide();
btn.parent().find("label").show();
});
// On click of - button need to show only top 3 filter elements
$('.showLess').click(function() {
var btn = $(this);
btn.siblings(".loadMore").show();
btn.hide();
btn.parent().find("label:gt(3)").hide();
});

$(document).ready(function() {
$(".showLess").hide();
// used to hide elements which are > 3 in numbers
$('.list-group-item').each(function(){
$(this).find('label :gt(2)').hide();
})
// On click of + button need to show rest of the filter elements
$('.loadMore').click(function() {
$(this).next().show();
//$(this).hide();
$(this).next().show();
$(this).parent().find('label').show();
});
// On click of - button need to show only top 3 filter elements
$('.showLess').click(function() {
$(this).hide();
$(this).parent().find('label').not(':lt(3)').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
</div>

Related

how to store values of list items in array on check box click and remove on unclick

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" />

jquery remove parent of parent cur.element

hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"
remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>
Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }

Select all in checkbox at the same time with multiple select all

Can I ask how to code a "select all" in a checkbox at the same time with multiple select all?
$(document).ready(function() {
$('.allcheckboxes').click(function() {
$(this).next().parent().parent().parent().toggleClass('checkallbox');
if($('#selectall_wrapper').hasClass('checkallbox')) {
$('#selectall_wrapper input[type="checkbox"]').prop('checked', true);
} else {
$('#selectall_wrapper input[type="checkbox"]').prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selectall_wrapper">
<li>
<div class="form-group">
<input id="checkedall" class="allcheckboxes" type="checkbox">
<label for="checkedall">Select all services</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Service 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Service 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">Service 3</label>
</div>
</li>
</ul>
<ul id="selectall_wrapper">
<li>
<div class="form-group">
<input id="checkedall" class="allcheckboxes" type="checkbox">
<label for="checkedall">Select all products</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">product 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">product 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">product 3</label>
</div>
</li>
</ul>
Using your code, you can use another wrapper and add that to your function. (this could be cleaned up and greatly simplified, but you get the idea.)
$(document).ready(function() {
$('.allcheckboxes').click(function() {
$(this).next().parent().parent().parent().toggleClass('checkallbox');
if($('#selectall_wrapper').hasClass('checkallbox')) {
$('#selectall_wrapper input[type="checkbox"]').prop('checked', true);
} else{
$('#selectall_wrapper input[type="checkbox"]').prop('checked', false);
} if($('#selectall_wrapper_2').hasClass('checkallbox')) {
$('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', true);
} else {
$('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selectall_wrapper">
<li>
<div class="form-group">
<input id="checkedall" class="allcheckboxes" type="checkbox">
<label for="checkedall">Select all services</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Service 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Service 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">Service 3</label>
</div>
</li>
</ul>
<ul id="selectall_wrapper_2">
<li>
<div class="form-group">
<input id="checkedall_2" class="allcheckboxes" type="checkbox">
<label for="checkedall_2">Select all products</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">product 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">product 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">product 3</label>
</div>
</li>
</ul>

uncheck selected checkbox when one of the checkbox option has been selected

I have 2 groups of checkbox options on same page. below is the code.
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" />
</label>
</div>
Now,
User can select first 3 check boxes but clicking the 4th (last) one should
select the 4th (last) one and deselect all other of the set. Same should
happen for all checkbox sets.
Example : User can select A,B,C checkbox at a same time but when he checks D
all the above selected checkboxes should get unselected. Similarly for E,F,G
and H. I hope I am clear now.
Please help me on this. I hope I am clear, if not please do let me know
The below code section should work according to your requirement
$(document).ready(function() {
$('.checkbox1').on('click', function() {
var last_chekbox1 = $('.checkbox1:last');
if (last_chekbox1.is(':checked')) {
$('.checkbox1').prop('checked', false);
$(this).prop('checked', true);
}
});
$('.checkbox2').on('click', function(e) {
var last_chekbox2 = $('.checkbox2:last');
if (last_chekbox2.is(':checked')) {
$('.checkbox2').prop('checked', false);
$(this).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" class="checkbox1" /> A
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" class="checkbox1" /> B
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" class="checkbox1" /> C
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" class="checkbox1" /> D
</label>
</div>
<hr>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" class="checkbox2" /> E
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" class="checkbox2" /> F
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" class="checkbox2" /> G
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" class="checkbox2" /> H
</label>
</div>
$('checkbox1').on('click'function(){
$('checkbox').attr('checked',false)
$(this).attr('checked',true)
})
try something like this

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>

Categories