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

  • 相关阅读:
    腾讯云挂载文件服务器节点
    OpsManage 安装
    centos7 安装mysql
    vs code 新建vue项目
    Centos7 安装supervisor
    腾讯云Centos7 安装nginx
    django 生成pdf
    VM安装虚拟机
    ACM/ICPC 之 Floyd练习六道(ZOJ2027-POJ2253-POJ2472-POJ1125-POJ1603-POJ2607)
    ACM/ICPC 之 Floyd范例两道(POJ2570-POJ2263)
  • 原文地址:https://www.cnblogs.com/snowbaby-kang/p/3822331.html
Copyright © 2011-2022 走看看