I am making a form with 10 fields with 10 checkboxes. On updating the field i want relevant checkbox to be checked. I can make it work by writing 10 different ON change function but i am looking for a smart way to achieve it instead of writing 10 different ON change functions for respective fields.
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
$('#field-1').bind('change', () => {
$('#checkbox-1').prop('checked', true);
});
$('#field-2').bind('change', () => {
$('#checkbox-2').prop('checked', true);
});
$('#field-3').bind('change', () => {
$('#checkbox-3').prop('checked', true);
});
I would advise you to use starts-with selector to find all your fields and bind input handlers. Then when you are able to handle it, you have to find appropriate checkbox and check it:
$('input[name^="field-"]').on('input', function(){
let fieldId = $(this).attr('name').slice(-1);
$('#checkbox-'+fieldId).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
Wrap your iinput field and checkbox in a div and then add the logic of checking your checkbox to those wrappers.
$('.checked-input').find('input[type=text]').on('change', function(){
$(this).closest('.checked-input').find('input[type=checkbox]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checked-input">
<input type="text" value="" id="field-1" name="field-1">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
</div>
<div class="checked-input">
<input type="text" value="" id="field-2" name="field-2">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
</div>
You could group all input which contain field in their id and use the number id to check corresponding checkbox:
$('input[id*=field]').on('change', function() {
$('#checkbox-' + $(this).prop("id").split('-')[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" />
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" />
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" />
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
As an alternative you could tell the input which checkbox to target using a data poperty. I also put an alternate to only check if not empty OR an alternate to find the prior sibling of each.
$('input[type=text]').on('change', function(event) {
let checkpair = $(this).data('targetpair');
$(checkpair).prop('checked', true);
// alternate only if not empty:
//$(checkpair).prop('checked', $(this).val().trim().length);
});
/* alternate that finds the immediate checkbox sibling
$('input[type=text]').on('change', function(event) {
$(this).prevAll('input[type=checkbox]').first().prop('checked', true);
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" />
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" data-targetpair="#checkbox-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" />
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" data-targetpair="#checkbox-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" />
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" data-targetpair="#checkbox-3" name="field-3">
<label class="form-label">Field 3</label>
Related
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>
i want to display all the values of the checked checkbox in a div
here is my code, how can i make it become multiple function?
$('[type="checkbox"]').on('change', function() {
var val = this.checked ? this.value : '';
$('#cs-input').html(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX">GMSC01
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX">GMSC02
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX">VMSC02
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX">GMGW01
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX">VMGW01
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX">VMGW02
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX">SPS01
<br>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX">SPS02
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX">HSS01
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX">HSS02
<br>
</div>
http://jsfiddle.net/Wy22s/1348/
Your current logic is only reading the value of the last clicked checkbox. Instead you can use map() to build an array of all the checked values, then join() the resulting array together as a string to be displayed, something like this:
$(':checkbox').on('change', function() {
var values = $(':checkbox:checked').map(function() {
return this.value;
}).get().join(', ');
$('#cs-input').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
<label>
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX" />GMSC01
</label>
<label>
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX" />GMSC02
</label>
<label>
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX" />VMSC01
</label><br />
<label>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX" />VMSC02
</label>
<label>
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX" />GMGW01
</label>
<label>
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX" />GMGW02
</label><br />
<label>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX" />VMGW01
</label>
<label>
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX" />VMGW02
</label>
<label>
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX" />SPS01
</label><br />
<label>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX" />SPS02
</label>
<label>
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX" />HSS01
</label>
<label>
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX" />HSS02
</label><br />
</div>
Note the use of the :checkbox selector over [type="checkbox"] and :checked within the handler to retrieve only those which have been chosen.
Also note the addition of label elements to make the hit area of each checkbox include the text next to it.
How to make jquery click function if checkBox checked then status value set to 'true', if not cheked value set to 'false'?
if I check checkbox 1 , then status 1 set to true
if I check checkbox 2 , then status 2 set to true
if I check checkbox 3 , then status 3 set to true
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
<input name="status[]" type="text" value="">
</div>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
<input name="status[]" type="text" value="">
</div>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
<input name="status[]" type="text" value="">
</div>
As your input is within <lable>, use parent().next() to set the value.
Here is the working example.
$(function() {
$('.form-group input[type="checkbox"]').change(function() {
if ($(this).is(":checked")) {
$(this).parent().next().val('true')
} else
$(this).parent().next().val('false');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
<input name="status[]" type="text" value="">
</div>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
<input name="status[]" type="text" value="">
</div>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
<input name="status[]" type="text" value="">
</div>
Try this :
$('input[type="checkbox"]').change(function() {
if($(this).prop('checked')){
$(this).parent().next().val("true");
}else{
$(this).parent().next().val("false");
}
});
$('input[type="checkbox"]').change(function () {
if ($(this).prop('checked')) { $(this).closest('label').next('input[type="text"]').val('true');
} else {
$(this).closest('label').next('input[type="text"]').val('false');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
<input name="status[]" type="text" value="">
</div>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
<input name="status[]" type="text" value="">
</div>
<div class="form-group">
<label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
<input name="status[]" type="text" value="">
</div>
You can try this
<div class="form-group">
<input name="checkBox" type="checkbox" value="1">
<input name="status" type="text" value="">
</div>
<div class="form-group">
<input name="checkBox" type="checkbox" value="2">
<input name="status" type="text" value="">
</div>
<div class="form-group">
<input name="checkBox" type="checkbox" value="3">
<input name="status" type="text" value="">
</div>
and the jquery script
$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
$(this).next('input[type="text"]').val('true');
} else {
$(this).next('input[type="text"]').val('false');
}
}).change();
https://jsfiddle.net/831mjzr1/
i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements
Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful
So I have 10 checkbox fields, more then 1 can be selected, but at least 1 has to be selected at a minimum.
I had it working use the name="" attribute but that was not the case anymore as the name has to be unique to integrate with our CRM.
So I added the rule to use the class instead using addClassRule() and I added my own method to use a custom message for required.
But the result is they are all required. regardless if 1 or more is selected?
Here is my jQuery which is working but it requires all 10 checkbox's to be checked.
$.validator.addMethod("checkboxRequired", $.validator.methods.required, "Please select at least 1 of the values");
jQuery.validator.addClassRules('checkbox-validate', {
checkboxRequired: true
});
HTML code:
<div id="id_1" class="form-input">
<label for="test1"><input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1">1</label>
<label for="test2"><input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2">2</label>
<label for="test3"><input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3">3</label>
<label for="test4"><input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4">4</label>
<label for="test5"><input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5">5</label>
<label for="test6"><input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6">6</label>
<label for="test7"><input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7">7</label>
<label for="test8"><input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8">8</label>
<label for="test9"><input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9">9</label>
<label for="test10"><input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10">10</label>
</div>
Try require_from_group-method rule
jQuery(function($) {
jQuery.validator.addClassRules('checkbox-validate', {
require_from_group: [1, ".checkbox-validate"]
});
var validator = $('#myform').validate({
rules: {},
messages: {},
errorPlacement: function(error, element) {
if (element.hasClass('checkbox-validate')) {
element.closest('.form-input').find('.error-holder').html(error)
} else {
error.insertAfter(element);
}
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div id="id_1" class="form-input">
<label for="test1">
<input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1" />1</label>
<label for="test2">
<input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2" />2</label>
<label for="test3">
<input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3" />3</label>
<label for="test4">
<input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4" />4</label>
<label for="test5">
<input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5" />5</label>
<label for="test6">
<input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6" />6</label>
<label for="test7">
<input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7" />7</label>
<label for="test8">
<input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8" />8</label>
<label for="test9">
<input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9" />9</label>
<label for="test10">
<input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10" />10</label>
<span class="error-holder"></span>
</div>
<input type="submit" value="Save" />
</form>
You need to make your name attribute all be the same value. Then you can check how many are checked like so:
var count = $('input[name=test]:checked').size();