zoukankan      html  css  js  c++  java
  • 多组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="足球">
    足球
    </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();
    }
    });

  • 相关阅读:
    【React】哪些数据应该放到state中?
    React组件生命周期及组件之间的通信
    【Flex布局教程】语法篇
    jQuery动态创建二级下拉菜单
    Web前端工程师成长之路——知识汇总
    Jpcap使用指南
    安装/重装tomcat(组图)
    贪吃蛇小游戏(含详细思路及源代码)
    servlet中如何操作数据库
    svn的使用方法
  • 原文地址:https://www.cnblogs.com/snowbaby-kang/p/3822331.html
Copyright © 2011-2022 走看看