多组checkbox与radio判断选中

标签：os   cti   html   for   代码   io   

有多组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="足球">
足球
</label>
<label class="checkbox" for="checkbox_1_1">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_1" value="篮球">
篮球
</label>
<label class="checkbox" for="checkbox_1_2">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_2" value="排球">
排球
</label>
<label class="checkbox" for="checkbox_1_3">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_3" value="羽毛球">
羽毛球
</label>
<label class="checkbox" for="checkbox_1_4">
<input type="checkbox" name="checkbox_1[]" id="checkbox_1_4" value="铅球">
铅球
</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="唱歌">
唱歌
</label>
<label class="checkbox" for="checkbox_2_1">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_1" value="跳舞">
跳舞
</label>
<label class="checkbox" for="checkbox_2_2">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_2" value="画画">
画画
</label>
<label class="checkbox" for="checkbox_2_3">
<input type="checkbox" name="checkbox_2[]" id="checkbox_2_3" value="吟诗">
吟诗
</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="博美犬">
博美犬
</label>
<label class="checkbox" for="checkbox_4_1">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_1" value="吉娃娃">
吉娃娃
</label>
<label class="checkbox" for="checkbox_4_2">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_2" value="贵宾犬">
贵宾犬
</label>
<label class="checkbox" for="checkbox_4_3">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_3" value="泰迪犬">
泰迪犬
</label>
<label class="checkbox" for="checkbox_4_4">
<input type="checkbox" name="checkbox_4[]" id="checkbox_4_4" value="秋田犬">
秋田犬
</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="中国">
中国
</label>
<label class="radio" for="radio_3_1">
<input type="radio" name="radio_3" id="radio_3_1" value="美国">
美国
</label>
<label class="radio" for="radio_3_2">
<input type="radio" name="radio_3" id="radio_3_2" value="英国">
英国
</label>
<label class="radio" for="radio_3_3">
<input type="radio" name="radio_3" id="radio_3_3" value="韩国">
韩国
</label>
<label class="radio" for="radio_3_4">
<input type="radio" name="radio_3" id="radio_3_4" value="俄罗斯">
俄罗斯
</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="睡觉">
睡觉
</label>
<label class="radio" for="radio_5_1">
<input type="radio" name="radio_5" id="radio_5_1" value="看电影">
看电影
</label>
<label class="radio" for="radio_5_2">
<input type="radio" name="radio_5" id="radio_5_2" value="购物">
购物
</label>
<label class="radio" for="radio_5_3">
<input type="radio" name="radio_5" id="radio_5_3" value="旅行">
旅行
</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="男">
男
</label>
<label class="radio" for="radio_6_1">
<input type="radio" name="radio_6" id="radio_6_1" value="女">
女
</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();
}
});

多组checkbox与radio判断选中,布布扣,bubuko.com

多组checkbox与radio判断选中

标签：os   cti   html   for   代码   io   

原文地址：http://www.cnblogs.com/snowbaby-kang/p/3822331.html