How to check 0 to nth index checkbox in using jquery - javascript

I have checkboxes which I want to check and uncheck by using button
for example suppose I want check checkbox 0 to 9 should be checked then I click on "10 or less" button so other checkbox must uncheck and only that check box checked which index less has than 10
Button
<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button>
Checkbox
<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
...
...
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />
I have used loop for this but may be there is any better way please let me know.
Thanks in advance

You'll want to use the .slice(n, n+1) to slice out the checkboxes you want. Please see the following question that shares a lot of similarity with yours:
Selecting the first "n" items with jQuery

Use jquery filter function to filter out the checkbox indices like this (assuming nth checkbox has value n as in the question):
$('input[type=checkbox]').filter(function() {
return $(this).val() >= min && $(this).val() <= max;
}).prop('checked', true);
See demo below:
$('button').click(function() {
let min = +$(this).attr('class').replace(/-\d+$/, '');
let max = +$(this).attr('class').replace(/^\d+-/, '');
// uncheck all
$('input[type=checkbox]').prop('checked', false);
// check the ones required
$('input[type=checkbox]').filter(function() {
return $(this).val() >= min && $(this).val() <= max;
}).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button> Checkbox
<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
<input type="checkbox" name="age[]" class="age_opts" value="22" /> 22 <br />
<input type="checkbox" name="age[]" class="age_opts" value="23" /> 23 <br />
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />

You can filter the relevant element and set their checked property:
$(function() {
$('.1-10').click(function() {
$('.age_opts').prop('checked', false);
$('.age_opts').filter((i) => i < 10).prop('checked', true);
});
$('.1-25').click(function() {
$('.age_opts').prop('checked', false);
$('.age_opts').filter((i) => i < 25).prop('checked', true);
});
$('.1-50').click(function() {
$('.age_opts').prop('checked', false);
$('.age_opts').filter((i) => i < 50).prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button>
<br />
<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
<input type="checkbox" name="age[]" class="age_opts" value="4" /> 4 <br />
<input type="checkbox" name="age[]" class="age_opts" value="5" /> 5 <br />
<input type="checkbox" name="age[]" class="age_opts" value="6" /> 6 <br />
<input type="checkbox" name="age[]" class="age_opts" value="7" /> 7 <br />
<input type="checkbox" name="age[]" class="age_opts" value="8" /> 8 <br />
<input type="checkbox" name="age[]" class="age_opts" value="9" /> 9 <br />
<input type="checkbox" name="age[]" class="age_opts" value="10" /> 10 <br />
...<br />
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />

Related

Show only Checked Options using Jquery

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>

Use multiple checkbox values calculations on the same page

<script type="text/javascript">
var total = 0;
function test(item){
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + " ";
document.getElementById('Totalcost2').innerHTML = total + " ";
document.getElementById('Totalcost3').innerHTML = total + " ";
}
</script>
</head>
<body>
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost"> </span><br />
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost2"> </span><br />
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost3"> </span><br />
</html>
My question is how to set it to show 3 different sums on the same page without conflicts, about conflicts I mean if I set 3 times the id="Totalcost" on the same page it should show them differently but they show the same, i tried to set 3 different id's id=Totalcost, Totalcost2 and Totalcost3 for example but it doesn't work it goes in conflict.
If I understand you well, because I'm not sure :
You can't attribute same ID to multiple elements.
You have to do something like this :
function test(){
var checklist = document.getElementById('modulo')
.getElementsByClassName('checklist');
for (var i = 0 ; i < checklist.length ; i++) {
var checkboxes = checklist[i].querySelectorAll('input[type=checkbox]'),
sum = 0;
for (var j = 0 ; j < checkboxes.length ; j++) {
if (checkboxes[j].checked) {
sum += Number(checkboxes[j].value)
}
}
checklist[i].getElementsByClassName('totalcost')[0].innerHTML = sum + " ";
}
}
document.getElementById('modulo').addEventListener('change',test,false)
And in BODY :
<form id="modulo">
<div class="checklist">
<input type="checkbox" name="channelcost" value="10" />10<br />
<input type="checkbox" name="channelcost" value="20" />20 <br />
<input type="checkbox" name="channelcost" value="40" />40 <br />
<input type="checkbox" name="channelcost" value="60" />60 <br /><br />
Total Amount : <span class="totalcost"> </span><br /><br />
</div>
<div class="checklist">
<input type="checkbox" name="channelcost" value="10" />10<br />
<input type="checkbox" name="channelcost" value="20" />20 <br />
<input type="checkbox" name="channelcost" value="40" />40 <br />
<input type="checkbox" name="channelcost" value="60" />60 <br /><br />
Total Amount : <span class="totalcost"> </span>
</div>
</form>

How to create button to check uncheckable checkbox

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>

How to checked and unchecked values of checkboxes with same name two different places using jquery?

I have checkboxes with same name two different places, like below
One place
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
Second place
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
updated my question, plz check once, actually one place first checkbox value same and 5th checkbox value same, so whichever checkbox select that checkbox only select, in this case both value 1 checked.
what i want is , if i select value 1 of one place automatically it selects second place value 1 and also seletc second place value 1 automatically it will select first place value 1 checkbox select using jquery , plz help me.
var vtypeid = [];
$.each($("input[name='vtypeid']:checked"), function(){
vtypeid.push($(this).val());
});
any one using this code how to do.
Selecting based on name="checkbox-group" in case there are other checkboxes on the page that aren't part of this functionality:
$(document).ready(function() {
var cbs = $('input[name="checkbox-group"]').click(function() {
cbs.filter(($(this).is(".place1") ? ".place2" : ".place1")
+ '[value="' + this.value + '"]')
.prop('checked', this.checked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First group:
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
<br><br>
Second group:
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />
Note: for checkboxes I recommend the click event rather than the change event, because the latter behaves a bit weirdly for keyboard input in some older browsers.
You can bind change event to class place1 and place2 and using value attribute you can check and uncheck the checkboxes in different places.
$(".place1").change(function () {
$("input[value=" + $(this).attr("value") + "].place2").prop("checked", $(this).prop("checked"));
});
$(".place2").change(function () {
$("input[value=" + $(this).attr("value") + "].place1").prop("checked", $(this).prop("checked"));
});
Check below snippet.
$(document).ready(function(){
$("input.place1[name=checkbox-group]").on('click', function(){
if($(this).prop('checked')){
$("input.place2[value="+$(this).val()+"]").prop('checked', true);
}
else{
$("input.place2[value="+$(this).val()+"]").prop('checked', false);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 1st
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
</div>
<div> 2nd
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />
</div>
There are different ways to do. it is one of the way
$('[name = checkbox-group]').on('click', function() {
var val = $(this).val();
$('[name = checkbox-group][value='+val+']').prop('checked', $(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
<br />
second
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />
you need to put this code its working
$(document).ready(function() {
$('input[type="checkbox"][name=checkbox-group]').change(function () {
$("input[name=checkbox-group][value='" + $(this).val() + "']").prop('checked', $(this).is(':checked'))
});
});
give unique id do like this
<input name="checkbox-group" id="chk1" class="place1" value="1" type="checkbox" onclick="document.getElementById('chk2').checked = this.checked;" />
<input name="checkbox-group_1" id="chk2" class="place2" value="1" type="checkbox" onclick="document.getElementById('chk1').checked = this.checked;" />

How do I set a group of checkboxes using values?

So I have a group of checkboxes, for example:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Now I have an array of values:
var values = ["2", "4", "7", "8"];
Now how do I end up with my group of checkboxes to look like this:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" />
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" />
Will I have to use two for-loops to do this? Is there a way in plain javascript or jquery that doesn't involve having to loop twice?
API docs demo
var values = ["2", "4", "7", "8"];
$('input[name="cbl"]').val(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Create a selector from the array, and check them all
$( '#cbl' + values.join(', #cbl') ).prop('checked', true);
FIDDLE
This is using the ID's, as that's a better way to select the elements than the values, if you still want to use the values, you can use the same concept
$( '[value="' + values.join('"], [value="') + '"]').prop('checked', true);
FIDDLE
or you can filter
$('input[type="checkbox"]').filter(function() {
return $.inArray(this.value, values) != -1;
}).prop('checked', true);

Categories

Resources