首页 > 代码库 > 多组checkbox与radio判断选中
多组checkbox与radio判断选中
有多组checkbox和radio,每组都必须有选择才能提交表单
简单代码如下
html代码:(就是3组checkbox,3组radio,checkbox类名为control-group checkbox;radio类名为control-group radio)
<form method="POST" id="wxform" action="xxxx" class="form-horizontal">
<div class="control-group checkbox">
<label class="control-label" n="1">运动</label>
<div class="controls">
<label class="checkbox" for="checkbox_1_0">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_0" value="http://www.mamicode.com/足球">
足球
</label>
<label class="checkbox" for="checkbox_1_1">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_1" value="http://www.mamicode.com/篮球">
篮球
</label>
<label class="checkbox" for="checkbox_1_2">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_2" value="http://www.mamicode.com/排球">
排球
</label>
<label class="checkbox" for="checkbox_1_3">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_3" value="http://www.mamicode.com/羽毛球">
羽毛球
</label>
<label class="checkbox" for="checkbox_1_4">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_4" value="http://www.mamicode.com/铅球">
铅球
</label>
</div>
</div>
<div class="control-group checkbox">
<label class="control-label" n="2">文艺</label>
<div class="controls">
<label class="checkbox" for="checkbox_2_0">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_0" value="http://www.mamicode.com/唱歌">
唱歌
</label>
<label class="checkbox" for="checkbox_2_1">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_1" value="http://www.mamicode.com/跳舞">
跳舞
</label>
<label class="checkbox" for="checkbox_2_2">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_2" value="http://www.mamicode.com/画画">
画画
</label>
<label class="checkbox" for="checkbox_2_3">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_3" value="http://www.mamicode.com/吟诗">
吟诗
</label>
</div>
</div>
<div class="control-group checkbox">
<label class="control-label" n="4">宠物狗</label>
<div class="controls">
<label class="checkbox" for="checkbox_4_0">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_0" value="http://www.mamicode.com/博美犬">
博美犬
</label>
<label class="checkbox" for="checkbox_4_1">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_1" value="http://www.mamicode.com/吉娃娃">
吉娃娃
</label>
<label class="checkbox" for="checkbox_4_2">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_2" value="http://www.mamicode.com/贵宾犬">
贵宾犬
</label>
<label class="checkbox" for="checkbox_4_3">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_3" value="http://www.mamicode.com/泰迪犬">
泰迪犬
</label>
<label class="checkbox" for="checkbox_4_4">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_4" value="http://www.mamicode.com/秋田犬">
秋田犬
</label>
</div>
</div>
<div class="control-group radio">
<label class="control-label" n="3">国籍</label>
<div class="controls">
<label class="radio" for="radio_3_0">
<input type="radio" name="radio_3" id="radio_3_0" value="http://www.mamicode.com/中国">
中国
</label>
<label class="radio" for="radio_3_1">
<input type="radio" name="radio_3" id="radio_3_1" value="http://www.mamicode.com/美国">
美国
</label>
<label class="radio" for="radio_3_2">
<input type="radio" name="radio_3" id="radio_3_2" value="http://www.mamicode.com/英国">
英国
</label>
<label class="radio" for="radio_3_3">
<input type="radio" name="radio_3" id="radio_3_3" value="http://www.mamicode.com/韩国">
韩国
</label>
<label class="radio" for="radio_3_4">
<input type="radio" name="radio_3" id="radio_3_4" value="http://www.mamicode.com/俄罗斯">
俄罗斯
</label>
</div>
</div>
<div class="control-group radio">
<label class="control-label" n="5">周末</label>
<div class="controls">
<label class="radio" for="radio_5_0">
<input type="radio" name="radio_5" id="radio_5_0" value="http://www.mamicode.com/睡觉">
睡觉
</label>
<label class="radio" for="radio_5_1">
<input type="radio" name="radio_5" id="radio_5_1" value="http://www.mamicode.com/看电影">
看电影
</label>
<label class="radio" for="radio_5_2">
<input type="radio" name="radio_5" id="radio_5_2" value="http://www.mamicode.com/购物">
购物
</label>
<label class="radio" for="radio_5_3">
<input type="radio" name="radio_5" id="radio_5_3" value="http://www.mamicode.com/旅行">
旅行
</label>
</div>
</div>
<div class="control-group radio">
<label class="control-label" n="6">性别</label>
<div class="controls">
<label class="radio" for="radio_6_0">
<input type="radio" name="radio_6" id="radio_6_0" value="http://www.mamicode.com/男">
男
</label>
<label class="radio" for="radio_6_1">
<input type="radio" name="radio_6" id="radio_6_1" value="http://www.mamicode.com/女">
女
</label>
</div>
</div>
</div>
<div class="form-actions ">
<div class="form-submit">
<button type="submit" class="btn btn-success disabled" id="savewxform">保存设置</button>
</div>
</div>
</form>
js代码
$("#savewxform").click(function(e){
e.preventDefault();
var isAllNull=1;
$(‘.control-group.checkbox,.control-group.radio‘).each(function(e){
var isNull=$(this).find(".controls input:checked").val();
if(!isNull){
alert("选项不能为空");
isAllNull=0;
return false;
}
});
if(isAllNull){
alert("完成");
$("#wxform").submit();
}
});