Mandatory checkbox selection in a group of checkboxes - javascript

I have a group of checkboxes. By default, few of them are checked. Once the user starts unchecking and when he unchecks last but one, I want to disable the last check box so that I am mandating one selection should always be there. Also, when he checks back the last but one, disabled checkbox should be enabled.
let hiddenCount = 0; let lastField;
this.checkBoxes.find((f) => {
if (!f.showDefault) {
hiddenCount++;
} else {
lastField = f;
}
});
this.checkBoxes.find((p) => {
if (totalCount - hiddenCount === 1 && lastField) {
p.disable = lastField.key === p.key;
} else {
p.disable = false;
}
});

Related

Acrobat DC Two Check boxes on or the other must be checked

I have two checkboxes one named OPEN the other named WOMEN. I would like to require that one or the other has to be checked. If one isn't checked then both boxes would show as required. As soon as you check a box the other requirement goes away.
How are you wanting to check these fields? This should help get you started. Place this code on a button under the run a script mouse up. When the button is clicked the code will execute.
// Assign a variable to each check box
var openCheck = getField("OPEN");
var womenCheck = getField("WOMEN");
// If neither box is checked when the button is clicked
if (openCheck.value == "Off" && womenCheck.value == "Off") {
// Alert that they are required fields
app.alert("These fields are required");
}
// If OPEN is checked, uncheck WOMEN
if (openCheck.value == "On") {
womenCheck.value = "Off";
}
// If WOMEN is checked, uncheck OPEN
if (womenCheck.value == "On") {
openCheck.value = "Off";
}
I was able to accomplish this by doing the following.
On "OPEN" Button
if (this.getField("OPEN").value != "Yes") {
this.getField("WOMEN").required = true ;
this.getField("OPEN").required = true ;
} else {
this.getField("WOMEN").required = false ;
this.getField("WOMEN").value="Off";
}
On "WOMEN" Button
if (this.getField("WOMEN").value != "Yes") {
this.getField("OPEN").required = true ;
this.getField("WOMEN").required = true ;
} else {
this.getField("OPEN").required = false ;
this.getField("OPEN").value="Off";
}

JS: looping function through checkbox array not counting properly

I want to validate the input on a series of checkboxes. There must be at least one checkbox selected, otherwise the user gets an alert to select one. However, the alert appears unless all of the checkboxes are selected.
I realize that the issue is how my for loop params are set, but I cannot figure out how to fix it.
for(var i=0;i<7;i++){
if( !checkboxes[i].checked ){
alert( 'You need to select at least one day!');
checkboxes[i].focus();
return false;
}
}
You can use a flag to set the validation status and set it to true if atleast 1 item is checked.
Then after the loop check whether the flag is set else there are no checkboxes selected.
var valid = false;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
valid = true;
break;
}
}
if (!valid) {
alert('You need to select at least one day!');
checkboxes[0].focus();
return false;
}
You want to do the opposite of what you're coding. your current code flashes the alert if the current checkbox is not checked, that is, if ANY checkbox is not checked. you can modify it to something like this:
var isChecked = false;
for(var i=0;i<7;i++){
if( checkboxes[i].checked ){
isChecked = true;
}
}
if ( !isChecked ) {
alert( 'You need to select at least one day!');
checkboxes[0].focus();
return false;
}
var clicked = false;
$(".CheckBoxClass").each(function () {
if($(this).checked ) clicked = true;
}
if(clicked)
return true;
else ...

Javascript check if radio button was checked?

I have found scripts that do it, but they only work with one radio button name, i have 5 different radio button sets. How can i check if its selected right now i tried on form submit
if(document.getElementById('radiogroup1').value=="") {
alert("Please select option one");
document.getElementById('radiogroup1').focus();
return false;
}
does not work.
If you have your heart set on using standard JavaScript then:
Function definition
var isSelected = function() {
var radioObj = document.formName.radioGroupName;
for(var i=0; i<radioObj.length; i++) {
if( radioObj[i].checked ) {
return true;
}
}
return false;
};
Usage
if( !isSelected() ) {
alert('Please select an option from group 1 .');
}
I'd suggest using jQuery. It has a lot of selector options which when used together simplify the much of the code to a single line.
Alternate Solution
if( $('input[type=radio][name=radioGroupName]:selected').length == 0 ) {
alert('Please select an option from group 1 .');
}
var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
if (radio.checked) {
checked = true;
break;
}
}
if (!checked) {
alert("Please select option one");
radios.focus();
return false;
}
return true;
A very simple function is:
<script type="text/javascript">
function checkRadios(form) {
var btns = form.r0;
for (var i=0; el=btns[i]; i++) {
if (el.checked) return true;
}
alert('Please select a radio button');
return false;
}
</script>
<form id="f0" onsubmit="return checkRadios(this);">
one<input type="radio" name="r0"><br>
two<input type="radio" name="r0"><br>
three<input type="radio" name="r0"><br>
<input type="submit">
</form>
However, you sould always have one radio button selected by default (i.e. with the select attribute), some user agents may automatically select the first button. Then you just need to check if the default (usually the first one) is checked or not.
Why don't just use a oneliner?
I wrote this code, it will submit the form if at least one radio is checked:
(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item')
Otherwise it will make an alert. Or you may also modify it to use with form's onsubmit:
return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item')
Just replace form_name and radio_name accordingly.
See how it works: http://jsfiddle.net/QXeDv/5/
Here's a good tutorial -> http://www.somacon.com/p143.php
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj) return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked) return radioObj.value;
else return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) return radioObj[i].value;
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj) return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true;
}
}
Are you ok with jquery? If so:
$(document).ready(function(){
if($('input[type=radio]:checked').length == 0)
{
alert("Please select option one");
document.getElementById('radiogroup1').focus();
return false;
}
}

Checkmark to exclusive item in Javascript

Hi I am using Titanium to create a table of row that can be checked.
I need to write some code in Javascript that allows only one row to be checked and when one is checked the other ones are unchecked.
I am not worried about Titanium part but more about a general solution.
I know I need to setup an array of all the rows. What do I do next when one box is checked? How would I go through the other ones and tell them to become unchecked?
Thanks for your help.
Live example : http://jsfiddle.net/ztm82/
function doit(table, event) {
if (event.target.nodeName === "INPUT"
&& event.target.type === "checkbox"
&& event.target.checked)
{
var rows = table.tBodies[0].rows;
for (var i = 0; i < rows.length; i++)
{
var input = rows[i].getElementsByTagName("INPUT")[0];
if (input !== event.target)
{
input.checked = false;
}
}
}
}
Try something like this:
var checkboxes = document.querySelectorAll('#myTable input[type="checkbox"]'),
checkboxClickHandler,
i;
checkboxClickHandler = function (event) {
var i;
// only uncheck if target is a checkbox which has been checked
if (event.target.checked) {
for (i = 0; i < checkboxes.length; i++) {
// don't uncheck clicked box
if (checkboxes[i] !== event.target) {
checkboxes[i].checked = false;
}
}
}
};
document.getElementById('#myTable').addEventListener('click', checkboxClickHandler, false);
Mutually exclusive checkboxes? Why not use radio buttons (<input type='radio'>) instead? You'd get this behaviour for free and it would be more intuitive for users.

Check Input text if empty based upon radio button selected

I have two radiobuttons in a group on my page. Based upon radiobutton selected i want to generate an alert.
var d=GetVal();
function GetVal()
{
var a = null;
var f = document.forms[0];
var e = f.elements["radiogroup"];
for (var i=0; i < e.length; i++)
{
if (e[i].checked)
{
a = e[i].value;
break;
}
}
return a;
}
At the time of form validation, It is always returning only first radiobutton value when iam reading it in if else loop.
if (!checkRadio("form","radiogroup"))
{
alert("none of the option was selected");
return false;
}
//if one radio option was selected
else
{
if(d="firstradiovalue"){
alert("first radio selected");
return false;}
else{
if(d="secondradiovalue"){
alert("second radio Selected");
return false;}
}
}
At the time of form submission, even if i choose second option i only get alert - "first radio selected". Any help. Thx in advance.
You need to use == not =:
if(d == "firstradiovalue"){
alert("first radio selected");
The return value of the expression d = "firstradiovalue" is d itself, which is always true.

Categories