CODEWITHSUNDEEP
javascriptcheckbox
ND17
ND17

Reputation: 208

How to check that at least one checkbox is checked in multiple checkboxes?

In my form so many checkboxes are used. I want to check that at least one checkbox is checked.

<div id="sun">
    <li><?php echo $this->__("SUN");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="mon">
    <li><?php echo $this->__("MON");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="tue">
    <li><?php echo $this->__("TUE");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="wed">
    <li><?php echo $this->__("WED");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM"></li>
</div>

How to validate at least one checkbox is checked?

Upvotes: 8

Views: 4347

Answers (6)

user1046334
user1046334

Reputation:

Well, straightforwardly:

var isSomeAlldayCheckboxChecked = document
  .querySelectorAll('input[type="checkbox"].allday')
  .some(function (each) { return each.checked; });

Upvotes: 9

Mukta Chourishi
Mukta Chourishi

Reputation: 51

You can use Jquery for this.

if ($('#form_id :checkbox:checked').length > 0)
{
        // one or more checkboxes are checked
}
else
{
       // no checkboxes are checked
}

Upvotes: 2

Benjamin Solum
Benjamin Solum

Reputation: 2321

If you're using a supported browser, you can leverage the :checked pseudo selector for a really succinct check. Simply do something like this:

if(document.forms[0].querySelector('input[type="checkbox"]:checked').length) {
  //At least 1 checkbox is selected within document
}

Be sure to target the correct form, either through document.querySelector or the document.forms list on the document object (as seen above).

Upvotes: 2

Brett Caswell
Brett Caswell

Reputation: 730

@herby's answer is the correct answer for checking whether some input in the input[type='checkbox'] array is checked.

This answer returns an array of checked inputs using querySelectorAll (MyFormManager.get_checkedInputs); it demonstrates adding event listeners to the queries input elements change event (MyFormManager.init) - which appends the check state to the className of the element (MyFormManager.onCheckChanged) - to facilitate the process.

var MyFormManager = {
  checkboxes: null,  
  onCheckChanged: function(sender, e) {
    console.log("sender:= %o, e:= %o", sender, e);
    sender.className = sender.className.replace(' true','').replace(' false','');
    sender.className += ' ' + String(sender.checked);
  },
  init : function() {
    checkboxes = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0, max = checkboxes.length; i < max; i++)
    {
      checkboxes[i].addEventListener('change', MyFormManager.onCheckChanged.bind(null, checkboxes[i]));
    }
  },
  get_checkedInputs : function() {
    return document.querySelectorAll("input[type='checkbox'].true");
  }
}

console.log(MyFormManager);
    
MyFormManager.init();

var message = document.querySelector("div#message");
    
document.querySelector("button#runCheck").addEventListener("click", function (e) {
  var checkedInputs = MyFormManager.get_checkedInputs();
  console.log(checkedInputs);
  message.innerHTML = "";
  var parentId;
  for (var i = 0, max = checkedInputs.length; i < max; i++)
  {
    parentId = checkedInputs[i].parentNode.parentNode.parentNode.id;
    message.innerHTML += '<div class="item"><span class="parentId">' + parentId + '</span><span class="checkedInput">' + checkedInputs[i].value + '</span></div>';
  }
});
body {background-color:whitesmoke;}

div { display:block;}

div > ul { 
  list-style:none;
  margin:0.5em auto 0 auto;
  padding:0.27em;
  background-color:white;
  border:0.05cm solid silver;
}

input[type='checkbox'] {cursor:pointer;}

div:first-child > ul:first-child {margin-top:0em;}

div > ul > li {list-style:none;}

div > ul > li > label {display:inline-block;padding:0.1em 0.3em;margin:0;width:8em;text-align:right;}


div.item {display:block;}
div.item > span.parentId {display:inline-block;width:3em;text-transform:uppercase;}
div.item > span.checkedInput {display:inline-block;width:8em;text-align:right;}
<div id="debugger">
  <div id='message'></div>
  <button id='runCheck'>Run Check</button>
</div>

<div id="sun">
  <ul>
    <li><!-- <?php echo $this->__("SUN");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="mon">
  <ul>
    <li><!-- <?php echo $this->__("MON");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>
<div id="tue">
  <ul>
    <li><!-- <?php echo $this->__("TUE");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>
<div id="wed">
  <ul>
    <li><!-- <?php echo $this->__("WED");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="thur">
  <ul>
    <li><!-- <?php echo $this->__("THUR");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Thursday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Thursday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Thursday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="fri">
  <ul>
    <li><!-- <?php echo $this->__("FRI");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Friday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Friday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Friday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="sat">
  <ul>
    <li><!-- <?php echo $this->__("SAT");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Saturday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Saturday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Saturday][6-9]" value="6PM - 9PM">
    </li>
  </ul>  
</div>

note that this is not optimized, also it does not account for dynamic controls (postback or xhr);

Upvotes: 1

Truezplaya
Truezplaya

Reputation: 1313

Something along the following lines:

var formNodes  = document.checks.getElementsByTagName('input');
for (var i=0;i<formNodes.length;i++) {
   /* If one is true set a variable to true and exit the loop */
}

Stack overflow post Here

Cheers,

Truez

Upvotes: 8

sasalilili
sasalilili

Reputation: 129

var count= 0;
var value_array=new Array();
jQuery('input[type="checkbox"]:checked').each(function(){ 
   value_array.push(jQuery(this).val());
   count = count + 1;
});

// count&value_array will tell you total selected

Upvotes: 4

Related Questions