チェックボックスの選択のためのjQuery forループ

Question

私は3つのチェックボックスがあり、ユーザの要件に基づいてチェックされることがあります。そして、私は彼らに、特に何もせずに誰かを選ぶことを要求されます。 しかし、私はそれらのうち少なくとも1つを選択してjQueryで同じことを達成したいと思っています。私はすでにバックエンドで検証を行っていますが、誰かがjQueryがforループ素晴らしいよ以下は Fiddle for the same

3つのチェックボックス

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> 

Answer 1

は彼らにスタータ用の共通クラスを与え、あなたは必ず少なくとも一つが

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

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

にチェックされていることを確認するために :checkedセレクタを使用することができます

Answer 2

あなたは次のようなものを試すことができますいくつかのボタンのクリックでこれを達成したいと思うことができます：

$(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>

Answer 3

あなたも、このためのjQueryを必要としません。

​​

他にも使用できます。

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

ワーキングサンプル：

Answer 4

あなただけのname属性と検証機能を使用することができhttps://jsfiddle.net/mspinks/gd11hfqx/1/