Making Sure at Least One Checkbox Is Checked

Making sure at least one checkbox is checked

You should avoid having two checkboxes with the same name if you plan to reference them like document.FC.c1. If you have multiple checkboxes named c1 how will the browser know which you are referring to?

Here's a non-jQuery solution to check if any checkboxes on the page are checked.

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

You need the Array.prototype.slice.call part to convert the NodeList returned by document.querySelectorAll into an array that you can call some on.

How can I require at least one checkbox be checked before a form can be submitted?

Here's an example using jquery and your html.

<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function () {
    $('#checkBtn').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("You must check at least one checkbox.");
        return false;
      }

    });
});

</script>

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>

<input type="button" value="Test Required" id="checkBtn">

</body>
</html>

Determine when at least one checkbox is checked in ReactJS

You should keep a counter of the checked checkbox

  <input 
    type="checkbox" 
    name={this.props.value} 
    value={this.props.value} 
    onChange={this.props.onChange} />

constructor(props) {
  super(props);
  this.state = {checkCount: 0}
}

<Checkbox
   value={obj.value}
   title={obj.title}
   onChange={(e) => {
     if (e.target.checked)
       this.setState((prevState) => ({checkCount: prevState.checkCount + 1, checkboxValid: true}))
     else {
       this.setState((prevState) => ({checkCount: prevState.checkCount - 1}), () => {
         if (this.state.checkCount === 0)
           this.setState({checkboxValid: false})
       })
     }
   }} />

We are setting the checkCount to +1 or -1 if the user checks or unchecks the checkbox. If he unchecks it, after updating the checkCount, we need to verify this.state.checkCount === 0 in order to set the checkboxValid state to false if the condition is valid.

How to make sure at least 1 checkbox is selected before submitting multipage form?

In your validation funcction , first check whether the current tab has any checkboxes. If it does, check whether at least one of them is checked. If not, set valid = false

function validateForm() {  // This function deals with validation of the form fields  var x, y, i, valid = true;  x = document.getElementsByClassName("tab");  y = x[currentTab].getElementsByTagName("input");  // A loop that checks every input field in the current tab:  for (i = 0; i < y.length; i++) {    // If a field is empty...    if (y[i].value == "") {      // add an "invalid" class to the field:      y[i].className += " invalid";      // and set the current valid status to false      valid = false;    }  }  // Are there any checkboxes on the current page?  if (x[currentTab].querySelector("input[type=checkbox]")) {    // Is at least one of them checked?    if (!x[currentTab].querySelector("input[type=checkbox]:checked")) {      valid = false;    }  }  // If the valid status is true, mark the step as finished and valid:  if (valid) {    document.getElementsByClassName("step")[currentTab].className += " finish";  }  return valid; // return the valid status}

How to validate that at least one checkbox should be selected?

consider creating a FormGroup which contains your check-box group and bind the group's checked value to a hidden formcontrol with a required validator.

Assume that you have three check boxes

items = [
  {key: 'item1', text: 'value1'},      // checkbox1 (label: value1)
  {key: 'item2', text: 'value2'},      // checkbox2 (label: value2)
  {key: 'item3', text: 'value3'},      // checkbox3 (label: value3)
];

Step1: define FormArray for your check boxes

let checkboxGroup = new FormArray(this.items.map(item => new FormGroup({
  id: new FormControl(item.key),      // id of checkbox(only use its value and won't show in html)
  text: new FormControl(item.text),   // text of checkbox(show its value as checkbox's label)
  checkbox: new FormControl(false)    // checkbox itself
})));

*easy to show via ngFor

Step2: create a hidden required formControl to keep status of checkbox group

let hiddenControl = new FormControl(this.mapItems(checkboxGroup.value), Validators.required);
// update checkbox group's value to hidden formcontrol
checkboxGroup.valueChanges.subscribe((v) => {
  hiddenControl.setValue(this.mapItems(v));
});

we only care about hidden control's required validate status and won't show this hidden control in html.

Step3: create final form group contains below checkbox group and hidden formControl

this.form = new FormGroup({
  items: checkboxGroup,
  selectedItems: hiddenControl
});

Html Template:

<form [formGroup]="form">
  <div [formArrayName]="'items'" [class.invalid]="!form.controls.selectedItems.valid">
    <div *ngFor="let control of form.controls.items.controls; let i = index;" [formGroup]="control">
      <input type="checkbox" formControlName="checkbox" id="{{ control.controls.id.value }}">
      <label attr.for="{{ control.controls.id.value }}">{{ control.controls.text.value }}</label>
    </div>
  </div>
  <div [class.invalid]="!form.controls.selectedItems.valid" *ngIf="!form.controls.selectedItems.valid">
    checkbox group is required!
  </div>
  <hr>
  <pre>{{form.controls.selectedItems.value | json}}</pre>
</form>

refer this demo.

Check if at least one checkbox is checked

$('input[type="checkbox"]:is("checked")').length > 0

at least one checkbox is check

With jquery > 1.7 you can call

$('input:checked').length

Check if at least one checkbox is checked without clicking

First of all remove the # from the div id in HTML.

Also consider making checkbox ids unique.

And to check whether any checkbox is checked, you can get by following code.

$(document).ready(function(){

function updateStatus(){
 if ($('div#filter input:checked').length > 0 ){
    $('#status').text("yes");
 }
 else {
    $('#status').text("no");
 } 
}

$('div#filter input[type="checkbox"]').on("change",updateStatus); 
updateStatus(); 
});

Not aware about your use case but you can also check it by calling the function after every 1 second (or as per requirement) like below.

$(document).ready(function(){

function updateStatus(){
 if ($('div#filter input:checked').length > 0 ){
    $('#status').text("yes");
 }
 else {
    $('#status').text("no");
 } 
}

window.setInterval(updateStatus, 1000); 
});

Making Sure at Least One Checkbox Is Checked