Question

我有三个复选框，可以根据用户的要求进行检查。而且我希望他们选择任何人，特别是被要求。但我希望他们至少选择其中一个，并希望用jQuery实现相同，我已经在后端完成了验证但是如果有人可以帮助我jQuery可以通过for循环实现相同的方式它将是大。 Fiddle for the same

以下是三个复选框

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

给他们一个普通的初学者课程，然后你可以使用:checked选择器来确保至少有一个被选中

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

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

Answer 2

假设您想通过点击某个按钮来实现此目的，您可以尝试以下方式：

＆＃13;

$(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
  }

});
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

你甚至不需要jQuery。

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.

然后你可以使用if else。

Answer 4

您可以使用name属性和验证功能：

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

工作样本：https://jsfiddle.net/mspinks/gd11hfqx/1/

用于复选框选择的jQuery for循环

4 个答案: