I have this sample:
link
CODE HTML:
<div class="box1">
<fieldset>
<input type="checkbox" class="select-all">
<label>Select All </label>
</fieldset>
<fieldset>
<input type="checkbox">
<label>Checkbox1</label>
</fieldset>
<fieldset>
<input type="checkbox">
<label>Checkbox3 </label>
</fieldset>
<fieldset>
<input type="checkbox">
<label>Checkbox3 </label>
</fieldset>
</div>
<div class="box2">
<fieldset>
<input type="checkbox" class="select-all">
<label>Select All </label>
</fieldset>
<fieldset>
<input type="checkbox">
<label>Checkbox4 </label>
</fieldset>
<fieldset>
<input type="checkbox">
<label>Checkbox5 </label>
</fieldset>
<fieldset>
<input type="checkbox">
<label>Checkbox6 </label>
</fieldset>
</div>
CODE CSS:
.box1{
background:#d9d9d9;
margin-bottom:20px;
}
.box2{
background:#ccc;
}
CODE JS:
$('.select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}else{
$(':checkbox').each(function() {
this.checked = false;
});
}
});
What I want to do is that when the button "select-all" is checked, select all fields in a box.
At this time, set all inputs ... and I wish only the current box.
How can I change my function so that it works?
Thanks in advance!
You can use .closest() to find the parent div, then use .find() method to get the checkboxes inside it,
$('.select-all').click(function(event) {
if (this.checked) {
// Iterate each checkbox
$(this).closest("div").find(':checkbox').each(function() {
this.checked = true;
});
} else {
$(this).closest("div").find(':checkbox').each(function() {
this.checked = false;
});
}
});
Demo
You can reduce your code like this also,
$('.select-all').click(function(event) {
var obj=this;
var parent = $(this).closest("div[class^=box]");
parent.find(':checkbox').each(function() {
this.checked = obj.checked;
});
});
As A.Wolf suggested, you can use like this too,
$('.select-all').change(function(event) {
$(this).closest('div[class^=box]').find(':checkbox').prop('checked', this.checked);
});
Related
I am having some trouble with my checkboxes. I am trying to get a returned true or false value out of event listeners on checkboxes and then passing it through an event listener on a button to confirm that at least one checkbox is selected. I'm sorry if this sounds confusing and I feel like there is an easier way to do this. I would like to solve this with pure JavaScript. Really appreciate the help. Below is the code.
<body>
<script src="racquetObjects.js"></script>
<div class="mainContainer">
<div class="selectors">
<form action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button type="button" id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
<script src="racquetFinderCB.js"></script>
<script src="racquetFinder.js"></script>
</body>
const findButton = document.querySelector("#find");
const checkboxes = document.querySelectorAll(
".checkboxes input[type=checkbox]"
);
const checkboxesAreChecked = checkboxes.forEach((el) => {
el.addEventListener("click", (e) => {
if (e.target.checked) {
return true;
} else {
return false;
}
});
});
const beforeSubmit = () => {
if (checkboxesAreChecked === true) {
console.log("Time to search!");
} else {`enter code here`
console.log("You need to select an option");
}
};
In this example there is an event listener for the form submit. An array of the input elements is filtered, so only the checked will end up in checked.
The first e.preventDefault() is just for testing. If the form should submit (something was checked) then remove that line of code.
document.forms.find.addEventListener('submit', e => {
let inputs = e.target.querySelectorAll('input');
e.preventDefault(); // prevent default to test what happens
let checked = [...inputs].filter(input => input.checked);
if (checked.length > 0) {
console.log('at least one was checked');
} else {
e.preventDefault(); // prevent default to stop the form action
console.log('none was checked');
}
});
<div class="mainContainer">
<div class="selectors">
<form name="find" action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
I want to use 3 input checkbox to display 3 different div. I am using this code but the only one working is "Course 1" and I can't figure out why. I guess it is something pretty easy, but I can't see it:
document.getElementById('checkbox1');
checkbox1.onchange = function() {
if (checkbox1.checked) {
course1.style.display = 'block';
} else {
course1.style.display = 'none';
}
};
document.getElementById('checkbox2');
checkbox2.onchange = function() {
if (checkbox2.checked) {
course2.style.display = 'block';
} else {
course2.style.display = 'none';
}
};
document.getElementById('checkbox3');
checkbox3.onchange = function() {
if (checkbox3.checked) {
course3.style.display = 'block';
} else {
course3.style.display = 'none';
}
};
<form>
<label class="switch">
<input type="checkbox" id="checkbox1" checked="true"> Course 1
</label>
</form>
<form>
<label class="switch">
<input type="checkbox" id="checkbox2" checked="true"> Course 2
</label>
</form>
<form>
<label class="switch">
<input type="checkbox" id="checkbox3" checked="true"> Course 3
</label>
</form>
<br>
<div id="course1"> Text course 1
</div>
<br>
<div id="course2"> Text course 2
</div>
<br>
<div id="course2"> Text course 3
</div>
Example: https://codepen.io/antonioagar1/pen/dqGaoO
You can try this simple code instead of your own code:
document.addEventListener("change", function(ev){
if(ev.target.id.substr(0,8)=="checkbox") document.querySelector("[id='course"+ev.target.getAttribute("id").slice(-1)+"']").style.display=ev.target.checked?"block":"none";
});
you have two div with id course2. first, change it to course3 and then try.
Check result online
I am trying to create a radio button that opens up an additional checkbox. When I run the code, the checkbox is already open. what can I do to fix it?
<script>
function accountFunction() {
if (document.getElementById('yesSrm').checked) {
document.getElementById('acct').style.display = "inline";
} else {
document.getElementById('acct').style.display = "none";
}
</script>
<form>
<input id="yesSrm" name="yesSrm" type="radio" value="yes" onchange="accountFunction()" />SRM<br/>
<br/>
<div id="acct">
<label for="account">Account</label>
<input type="checkbox" name="account" id="account"><br/>
</div>
</form>
How it appears
Just add display:none to acct block to hide it by default
<script>
function accountFunction() {
if (document.getElementById('yesSrm').checked) {
document.getElementById('acct').style.display = "block";
} else {
document.getElementById('acct').style.display = "none";
}
}
</script>
<form>
<input id="yesSrm" name="yesSrm" type="radio" value="yes" onchange="accountFunction()" />SRM<br/>
<br/>
<div id="acct" style="display: none">
<label for="account">Account</label>
<input type="checkbox" name="account" id="account"><br/>
</div>
</form>
I only want 1 checkbox to be selected - UNLESS its checkbox 3 AND 4 - then I want to allow these 2 checkboxes to be selected. This is the only time I want 2 checkboxes allowed.
I have a working example of only allowing 1 checkbox. see the jsfiddle...
https://jsfiddle.net/rbla/s1setkfe/3/
I need to allow #3 and #4 to be selected
$(function() {
$('#submit').click(function() {
checked = $("input[type=checkbox]:checked").length;
if (!checked) {
alert("You must check at least one reason.");
return false;
}
});
});
// No more than 1 checkbox allowed
var limit = 1;
$('input.sing-chbx').on('change', function(evt) {
if ($("input[name='choice[]']:checked").length > limit) {
this.checked = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" name="formname" method="post" autocomplete="off" id="update">
<div class="group" style="margin:0.5em 0;">
<div>
<div id="one">
<input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01">
<label>One</label><br/>
</div>
<div id="two">
<input type="checkbox" class="sing-chbx" name="choice[]" value="02">
<label>Two</label><br/>
</div>
<div id="three">
<input type="checkbox" class="sing-chbx" name="choice[]" value="03">
<label>Three</label><br/>
</div>
<div id="four">
<input type="checkbox" class="sing-chbx" name="choice[]" value="04">
<label>Four</label><br/>
</div>
<div id="five">
<input type="checkbox" class="sing-chbx" name="choice[]" value="05">
<label>Five</label><br/>
</div>
</div>
</div>
<input type="submit" id="submit" value="Confirm Submission">
</form>
I have created a fiddle for you demonstrating my solution.
I changed the way you're handling this to be more visual to the user with what is happening by actually disabling the other checkboxes.
I added new classes to all of the checkboxes that only allow one selection, and added a separate class to the checkboxes that allow two selections.
After that you just need to check the class of the clicked checkbox, and disable the others depending on whether or not it was a select-one or select-two checkbox:
var canOnlySelectOne = $(this).hasClass("select-one");
if (canOnlySelectOne) {
$(".sing-chbx").not(this).attr("disabled", this.checked);
} else if ($(this).hasClass("select-two")) {
if ($(".select-two:checked").length > 0) {
$(".select-one").attr("disabled", true);
} else {
$(".select-one").attr("disabled", this.checked);
}
}
We simply enable/disable the other checkboxes based on whether or not the clicked one (this) is checked or not. If the checkbox has a class of select-two then we check if any of the select-two checkboxes are checked, and act accordingly.
Instead of preventing user to check - just uncheck prev selection
You have 3 cases: 03 is clicked, 04 is clicked, something else clicked
Here is the updated code:
$(function() {
$('#submit').click(function() {
checked = $("input[type=checkbox]:checked").length;
if (!checked) {
alert("You must check at least one reason.");
return false;
}
});
});
// No more than 1 checkbox allowed except 3 & 4
$('input.sing-chbx').on('change', function(evt) {
var me = $(this).val();
$('input.sing-chbx').each(function(ix){
var el = $(this);
if(el.val()!= me) {
if(me == "03") {
// case 1: me == '03' - disable all but '04'
if( el.val() != "04") {
el.prop('checked', false);
}
} else if(me == "04") {
// case 2: me == '04' - disable all but '03'
if(el.val() != "03") {
el.prop('checked', false);
}
} else {
// otherwise disable all
el.prop('checked', false);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" name="formname" method="post" autocomplete="off" id="update">
<div class="group" style="margin:0.5em 0;">
<div>
<div id="one">
<input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01">
<label>One</label><br/>
</div>
<div id="two">
<input type="checkbox" class="sing-chbx" name="choice[]" value="02">
<label>Two</label><br/>
</div>
<div id="three">
<input type="checkbox" class="sing-chbx" name="choice[]" value="03">
<label>Three</label><br/>
</div>
<div id="four">
<input type="checkbox" class="sing-chbx" name="choice[]" value="04">
<label>Four</label><br/>
</div>
<div id="five">
<input type="checkbox" class="sing-chbx" name="choice[]" value="05">
<label>Five</label><br/>
</div>
</div>
</div>
<input type="submit" id="submit" value="Confirm Submission">
</form>
When onClick on link occurs, all checkboxes present in that div are checked.
function initSelectAll() {
$("form").find("a.selectAll").click(function() {
var cb = $(this).closest("div").find("input[type=checkbox]");
cb.not(":checked").click().length || cb.click();
//........WANT TO UNCHECK checkboxes with class="file" where link id is 'id="ninapaya"'; how to do that?......
return false;
});
}
initSelectAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
Select
<span class="kukapaya">(alle)</span>
<br>
<input type="checkbox" class="document" name="check2">
<input type="checkbox" class="document" name="check2">
<br>
<input type="checkbox" class="File">
<input type="checkbox" class="File">
</div>
</form>
Requirement: We should not check the checkboxes with class="File".
JSFiddle: https://jsfiddle.net/k4d6zpay/
It could be simplified using .prop(.prop( propertyName, function )) and using :not selector
$("form").find("a.selectAll").click(function() {
$(this).closest("div").find("input[type='checkbox']:not('.File')").prop('checked', function() {
return !this.checked;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div>
Select
<span class="kukapaya">(alle)</span>
<br>
<input type="checkbox" class="document" name="check2">
<input type="checkbox" class="document" name="check2">
<br>
<input type="checkbox" class="File">
<input type="checkbox" class="File">
</div>
</form>
try this:
function initSelectAll() {
$("form").find("a.selectAll").click(function() {
var cb = $(this).closest("div").find("input[type=checkbox]");
cb.not(":checked").not('.File').click().length || cb.click();
return false;
});
}
initSelectAll();
Also update in your jsfiddle link: https://jsfiddle.net/k4d6zpay/1/
function initSelectAll() {
$("form").find("a.selectAll").click(function() {
var cb = $(this).closest("div").find("input[type=checkbox]:not(.File)");
cb.not(":checked").click().length || cb.click();
//........WANT TO UNCHECK checkboxes with class="file" where link id is 'id="ninapaya"';
$(this).closest("div").find("input[type=checkbox][id='ninapaya'].File").prop('checked',false);
return false;
});
}
initSelectAll();