jQuery for loop for checkbox selection

Question

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>

No @Alexandru-IonutMihai, like if the user is opening a request for tests and then selecting one test or multiple tests from it. But have to select at least one before closing. So wanted to do a for loop which would say that one has selected. Also in future I might increase the test numbers so then it should automatically iterate the values to the loop on how many selected. — Bob
– Bob, Commented Jan 31, 2017 at 19:32
@j08691 those id's are of css, my bad for the confusion. I haven't added the javascript to it yet. — Bob
– Bob, Commented Jan 31, 2017 at 19:34

charlietfl · Accepted Answer · 2017-01-31 19:30:18Z

2

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
}

answered Jan 31, 2017 at 19:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RohitS · Accepted Answer · 2017-01-31 19:32:36Z

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>

Mike · Accepted Answer · 2017-01-31 19:37:59Z

1

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.

answered Jan 31, 2017 at 19:37

Mike

7871 gold badge7 silver badges11 bronze badges

Comments

Matt Spinks · Accepted Answer · 2017-01-31 19:50:55Z

1

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/

answered Jan 31, 2017 at 19:50

Matt Spinks

6,7404 gold badges32 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery for loop for checkbox selection

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related