CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Bob
Bob

Reputation: 477

jQuery for loop for checkbox selection

I have three checkboxes which might be checked based on the requirement of the user. And I want them to select anyone without any, in particular, being required. But I want them to select at least one amongst the and want to achieve the same with jQuery, I have already done the validation on the backend but if someone can help me a way where jQuery can achieve the same with a for loop it would be great. Fiddle for the same

Below are the three checkboxes

HTML:

<div class="form-group">
    <div class="cols-sm-10">
        <p>Select tests </p>
        <label class="col-md-12" id="select-type">
          <div class="col-md-2" id="select-type">
            <input value="Test A" type="checkbox" name="app1" ><span class="radio-size"><span class="demo-select">&times;</span></span>
          </div>
        </label>
        <label class="col-md-12" id="select-type">
          <div class="col-md-2" id="select-type">
            <input value="Test B" type="checkbox" name="app1" ><span class="radio-size"><span class="demo-select">&times;</span></span>
          </div>
        </label>
        <label class="col-md-12" id="select-type">
          <div class="col-md-2" id="select-type">
            <input value="Test C" type="checkbox" name="app1" ><span class="radio-size"><span class="demo-select">&times;</span></span>
          </div>
        </label>
    </div>
</div>

Upvotes: 0

Views: 487

Answers (4)

Matt Spinks
Matt Spinks

Reputation: 6698

You could just use the name attribute and a validate function:

function validate() {
    return $('input:checkbox:checked').length > 0;
}

Working sample: https://jsfiddle.net/mspinks/gd11hfqx/1/

Upvotes: 1

Mike
Mike

Reputation: 787

You don't even need jQuery for this.

var checkedInputs = document.querySelectorAll("[name='app1']:checked"); // returns array of checked inputs which has name attribute equals to app1
var howManyCheckedInputs = checkedInputs.length; // returns count of checked inputs. If there is none it will be 0.

Then you can use if else.

Upvotes: 1

RohitS
RohitS

Reputation: 1046

lets assume you want to achieve this on click of some button you can try something like :

$(document).ready(function(){
$('#button1').click(function(){
var elements=$('input[type="checkbox"]:checked');
if(elements.length<1)
{
alert('Please choose one Option');
}else
  {
    //do what you want like submit form
  }

});
});
#select-type {
    padding-left: 0;
    padding-right: 0;
    font-weight: 500;
}
.demo-select {
    font-size: 20px;
    color: #fff;
    padding: 6px;
}
.radio-size {
    width: 2.0em;
    height: 2.0em;
}
input[type=radio] {
    display: none;
}
input[type=radio] + span {
    display: inline-block;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    margin: 0 0.5em;
    background-color: #fbfbfb;
}
input[type=radio]:checked + span {
    background-color: #5290c3;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + span {
    display: inline-block;
    border: 1px solid #d4d4d4;
    margin: 0 0.5em;
    background-color: #fbfbfb;
}
input[type=checkbox]:checked + span {
    background-color: #5290c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
    <div class="cols-sm-10">
        <p>Select tests </p>
        <label class="col-md-12" id="select-type">
          <div class="col-md-2" id="select-type">
            <input value="Test A" type="checkbox" name="app1" ><span class="radio-size"><span class="demo-select">&times;</span></span>
          </div>
        </label>
        <label class="col-md-12" id="select-type">
          <div class="col-md-2" id="select-type">
            <input value="Test B" type="checkbox" name="app1" ><span class="radio-size"><span class="demo-select">&times;</span></span>
          </div>
        </label>
        <label class="col-md-12" id="select-type">
          <div class="col-md-2" id="select-type">
            <input value="Test C" type="checkbox" name="app1" ><span class="radio-size"><span class="demo-select">&times;</span></span>
          </div>
        </label>
    </div><br/>
    <input type="button" value="Submit form" id="button1">
</div>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

give them a common class for starters then you can use :checked selector to make sure at least one is checked

var hasChecked = $('.checkBoxClass:checked').length;

if(!hasChecked){
  // show some error message
}

Upvotes: 2

Related Questions