Limit Number Multiple Checkboxes in JS - javascript

I have multiple checkboxes with limits but it doesn't work with JS like this
$(".checkbox-limit").on('change', function(evt) {
var limit = parseInt($(this).parent().data("limit"));
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
alert("The limit is " + limit)
}
});
and for html like this:
<div class="row js_check_two" data-limit="2">
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="1">
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="2">
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="3">
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="4">
</label>
</div>
</div>
This code not working,
Any suggestions would be gratefully receive!


You have to change your script to this -
$(".checkbox-limit").on('change', function(evt) {
var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));
console.log($('input.checkbox-limit:checked').length);
if($('input.checkbox-limit:checked').length > limit) {
this.checked = false;
alert("The limit is " + limit);
}
});


$(".checkbox-limit").on('change', function(evt) {
var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));
console.log($('input.checkbox-limit:checked').length);
if($('input.checkbox-limit:checked').length > limit) {
this.checked = false;
alert("The limit is " + limit);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row js_check_two" data-limit="2">
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="1">1
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="2">2
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="3">3
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="4">4
</label>
</div>
</div>
<br>
<br>
<div class="row js_check_two" data-limit="2">
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="7">7
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="8">8
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="9">9
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="10">10
</label>
</div>
</div>
I used that but effect for global

Related

Loop multiple check boxes in javascript addition

I have a simple checkbox calculator, that pretty much adds the items that are checked. How can I seperate the totalPrice. My issue is that it doesn't display in the right place when food items are selected.
Is there a way to display the price in the right spot according to which items are ticked.. For example items from technology should display in the totalPrice for that fieldset, and items checked from foods should display in the totalPrice for that fieldset. I struggle to make the code as intuitive as possible, any help or tips will be appreciated.
function priceAddition() {
var input = document.getElementsByName("option");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Technology</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="2500"> 4K Television $2500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="250"> Speakers $250
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Laptop $500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Gaming Console $500
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for technology: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Food</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="12.99"> 1kg of Chicken $12.99
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="5"> Grapes $5
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="22"> Salmon Fish $22
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="30"> 12 Donuts $30
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for food: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>

Ok, so first of all you've used an id twice, that causess some issues, also you'll need seperate functions for both forms.
Here's the new code:
function priceAddition() {
var input = document.getElementsByName("option");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}
function priceAddition2() {
var input = document.getElementsByName("option2");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice2").innerHTML = "$" + total.toFixed(2);
}
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Technology</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="2500"> 4K Television $2500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="250"> Speakers $250
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Laptop $500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Gaming Console $500
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for technology: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>
<form method="post" oninput="priceAddition2();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Food</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="12.99"> 1kg of Chicken $12.99
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="5"> Grapes $5
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="22"> Salmon Fish $22
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="30"> 12 Donuts $30
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for food: </h3>
<p id="totalPrice2">$0.00</p>
</div>
</fieldset>
</div>
</form>

Laravel 8 Javascript function not working with form tag

The code below works fine without the use of the FORM tag.
But after I add the FORM tag, the code does not work anymore.
My code:
function ismcstop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>

Just rename ismcstop() function name like below
function ismcsfortop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>

Change the name of the label to something else other than ismcstop. I think it is overridden the function.
<label for="ismcstopLabel">Machine Stop?</label>
OR
Change the function name ismcstop() to ismcstopFunc()

How to document.querySelectorAll() only checked items

I have a quick wizard that captures customer selection with both checkboxes and radio buttons (only a single instance on each wizard page so only radio or checkboxes)
I'm trying to capture only the selected radio and checkboxes
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value, status } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
here is the HTML with the 3 step wizard
<section>
<div class="container">
<form>
<div class="step step-1 active">
<h2>How to serve?</h2>
<div class="form-group">
<input type="radio" id="forhere" name="where" value="forhere"
checked>
<label for="forhere">For Here</label>
</div>
<div class="form-group">
<input type="radio" id="togo" name="where" value="togo">
<label for="togo">To Go</label>
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<h2>Size?</h2>
<div class="form-group">
<input type="radio" id="small" name="size" value="small"
checked>
<label for="small">Small</label>
</div>
<div class="form-group">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium + 0.49c</label>
</div>
<div class="form-group">
<input type="radio" id="large" name="size" value="large">
<label for="large">Large + 0.99c</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<p>Anything Else:</p>
<div class="form-group">
<input type="checkbox" id="extrahot" name="extrahot" checked>
<label for="extrahot">Extra Hot</label>
</div>
<div class="form-group">
<input type="checkbox" id="doubleshot" name="doubleshot">
<label for="doubleshot">Double Shot + $0.49c</label>
</div>
<div class="form-group">
<input type="checkbox" id="whipped" name="whipped">
<label for="whipped">Whipped Cream</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Add To Order</button>
</div>
</form>
</div>
</section>
I'm not set on this as I'm going to be adding this as a popup that I currently use only with a single selection option but need the checkboxes
Thank you

Return just the checked items.
form.querySelectorAll("input:checked")

const elements = form.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});

If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();

Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>

try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});

Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>

Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

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

Categories