When I click parent 1 check allbutton all the child should be slected based on parent id. I have more number of parent each parent have individual id's. How can I do it. I tried some codes its not working. anyone help me on this. Thank you.
<div>
<input type="checkbox" id="choice_5621_1"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2"> Parent 2 check all <br />
<input type="checkbox" id="choice_5621_2_1"> <br />
<input type="checkbox" id="choice_5621_2_2"> <br />
<input type="checkbox" id="choice_5621_2_3">
</div>
As you have wrapped all your inputs in a div, you can use .nextAll()
// I gave the parent a checkall class just for demo cos not sure what your initial selector is:
$('.checkall').on('change', function() {
$(this).nextAll('input').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
Here is the solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<ul>
<li>
<input type="checkbox" name="choice_5621_1"> Parent 1 check all</input>
<ul>
<li><input type="checkbox" name="choice_5621_1_1">Child 1</input></li>
<li><input type="checkbox" name="choice_5621_1_2">Child 1</input></li>
<li><input type="checkbox" name="choice_5621_1_3">Child 1</input></li>
<li><input type="checkbox" name="choice_5621_1_4">Child 1</input></li>
</ul>
</li>
<li>
<input type="checkbox" name="choice_5621_2"> Parent 2 check all </input>
<ul>
<li><input type="checkbox" name="choice_5621_2_1">Child 2</input></li>
<li><input type="checkbox" name="choice_5621_2_2">Child 2</input></li>
<li><input type="checkbox" name="choice_5621_2_3">Child 2</input></li>
<li><input type="checkbox" name="choice_5621_2_4">Child 2</input></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
$('input[name="choice_5621_1"]').bind('click', function () {
$('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
});
$('input[name="choice_5621_2"]').bind('click', function () {
$('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
});
});
</script>
i guess You need to use the attribute starts with selector, like this:
$('div[id^="choice_5621_2_"]').prop('checked', true);
You can use the siblings selector of jQuery and select all checkboxes which are at same level.
$('.checkall').on('click', function() {
$(this).siblings('input').prop('checked', this.checked);
});
//Also making sure if any of the level2 checkbox is unchecked, then uncheck the main checkbox too.
$('.level2').on('click', function() {
$(this).siblings('.checkall').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1" class="level2"> <br />
<input type="checkbox" id="choice_5621_1_2" class="level2"> <br />
<input type="checkbox" id="choice_5621_1_3" class="level2">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2" class="checkall"> Parent 2 check all
<br />
<input type="checkbox" id="choice_5621_2_1" class="level2"><br />
<input type="checkbox" id="choice_5621_2_2" class="level2"><br />
<input type="checkbox" id="choice_5621_2_3" class="level2">
</div>
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. The .parents() and .closest() methods are similar in that they both traverse up the DOM tree
$("#choice_5621_2 , #choice_5621_1").on("click",function(){
$(this).closest("div" ).find("input[type='checkbox']").not($(this)).prop("checked",$(this).is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2"> Parent 2 check all <br />
<input type="checkbox" id="choice_5621_2_1"> <br />
<input type="checkbox" id="choice_5621_2_2"> <br />
<input type="checkbox" id="choice_5621_2_3">
</div>
$(document).ready(function() {
$(".parent").on("click", function(){
$(this).parent().find(":checkbox").prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1" class="parent"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2" class="parent"> Parent 2 check all <br />
<input type="checkbox" id="choice_5621_2_1"> <br />
<input type="checkbox" id="choice_5621_2_2"> <br />
<input type="checkbox" id="choice_5621_2_3">
</div>
But perhaps you should toggle them.
edit toggle, like in Pete's answer! and use the nextall instead of parent like I did.
Related
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
If I want to check all but one item this way works, however I want to except more than one item, such as:
var ingore_ids = [1,2,3];
Then this code does not work:
$('#checkAll').click(function () {
$('input:checkbox').not(this).not(ignore_ids).prop('checked', this.checked);)
});
How can I fix this?
The problem with your logic is that not() expects a selector or array of elements to exclude from the current collection.
To fix this issue you can use join() to build a selector from the id values contained in the array, something like this:
var ingore_ids = [1, 2, 3];
$('#checkAll').click(function() {
$('input:checkbox').not('#' + ingore_ids.join(',#')).prop('checked', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkAll" /> check some...<br />
</label>
<input type="checkbox" id="1" /><br />
<input type="checkbox" id="2" /><br />
<input type="checkbox" id="3" /><br />
<input type="checkbox" id="4" /><br />
<input type="checkbox" id="5" /><br />
<input type="checkbox" id="6" /><br />
An alternative would be to provide a function to not() which checks if the id of the current checkbox is not in the array:
var ingore_ids = [1,2,3];
$('#checkAll').click(function() {
$('input:checkbox').not(function(i, el) {
return ingore_ids.indexOf(parseInt(el.id, 10)) !== -1;
}).prop('checked', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkAll" /> check some...<br />
</label>
<input type="checkbox" id="1" /><br />
<input type="checkbox" id="2" /><br />
<input type="checkbox" id="3" /><br />
<input type="checkbox" id="4" /><br />
<input type="checkbox" id="5" /><br />
<input type="checkbox" id="6" /><br />
This is another way use each and attr method.
var ignores = [1,2,3];
$('#checkAll').click(function() {
$('input:checkbox').each(function(index, item) {
var id = parseInt($(item).attr('id'));
if(ignores.indexOf(id) == -1){
$(item).prop('checked', 'checked')
}
});
});
var ignores = [1,2,3];
$('#checkAll').click(function() {
$('input:checkbox').each(function(index, item) {
var id = parseInt($(item).attr('id'));
if(ignores.indexOf(id) == -1){
$(item).prop('checked', 'checked')
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkAll" /> check some...<br />
</label>
<p>check all ignore 1,2,3</p>
<input type="checkbox" id="1" />1<br />
<input type="checkbox" id="2" />2<br />
<input type="checkbox" id="3" />3<br />
<input type="checkbox" id="4" />4<br />
<input type="checkbox" id="5" />5<br />
<input type="checkbox" id="6" />6<br />
I have 10 checkboxes and as an example i checked only two of them and i need to create a button to check the another 8 box and uncheck the other two (that already checked before) How i can do this?
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
here simple example for your code
$('input.check11').click(function(){
$('input.check21').prop('checked',this.checked)
$('input.check22').prop('checked', false)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" class="check11" value="">all</span><br>
</label>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
</div>
</div>
</form>
I thing the best approach is to add class to every checkbox that you want to invert, and for each checkbox with that class invert 'checked' property
$('button').on('click', function(){
$('.invert').each(function(){
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
$(document).ready(function(){
$('#button').click(function(){
$('input[type="checkbox"]').each(function(){
if($(this).prop("checked") == true){
$(this).prop('checked', false);
}
else if($(this).prop("checked") == false){
$(this).prop('checked', true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<input type="button" id="button" value="click">
Please check the Code will help you out
thanks
$(document).ready(function () {
$('#btnClick').click(function () {
$('input[type="checkbox"]').each(function () {
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<br />
<input type="button" id="btnClick" value="Click" >
Check This answer , you need to loop in all check box and vice versa check
$('#copyButton2').on('click',function(){
$('#AllCheckbox input').each(function(){
$(this).prop('checked', !$(this).prop("checked"));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='AllCheckbox'>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
</div>
<button id="copyButton2">CheckOther</button>
I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>
Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />
You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>
function test(element) {
var result = $(element).val();
$('#course').append(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox
First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>
Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>
Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>
In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.
Can you please take a look at this demo and let me know why I am not able to get Custom Attribute data Values on each checkbox check?
$('.styles-control').change(function () {
console.log(this.data('style'));
});
<input type="checkbox" class="styles-control" data-style="road">Roads
<br />
<input type="checkbox" class="styles-control" data-style="poi">Poi
<br />
<input type="checkbox" class="styles-control" data-style="water">Water
<br />
<input type="checkbox" class="styles-control" data-style="transit">translink
<br />
You can use dataset.style:
$('.styles-control').change(function () {
console.log(this.dataset.style);
});
$('.styles-control').change(function () {
console.log(this.dataset.style);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="styles-control" data-style="road">Roads
<br />
<input type="checkbox" class="styles-control" data-style="poi">Poi
<br />
<input type="checkbox" class="styles-control" data-style="water">Water
<br />
<input type="checkbox" class="styles-control" data-style="transit">translink
<br />
.data is a jQuery method, wrap this in jQuery
console.log($(this).data('style')); //this.getAttribute("data-style")