专栏首页编程微刊关于checkbox传值问题

关于checkbox传值问题

最近不知道要写什么了,没有怎么学习新的知识点,而是一直在研究jquery相关的东西,有人说jquery已经快要过时了,很多公司都不用这个框架了,但是我觉得,有些知识,作为基础,还是要多回顾一下,记录一下。今天写了一个简单的功能,将checkbox选中的value值提交到后端。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="form-group">
                <label class="col-md-4 col-sm-4  col-xs-4 control-label">周期选择</label>
                <div class="col-md-7 col-sm-7  col-xs-7">
                    <label><input name="circle" type="checkbox" value="2" />星期一</label>
                    <label><input name="circle" type="checkbox" value="3" />星期二 </label>
                    <label><input name="circle" type="checkbox" value="4" />星期三 </label>
                    <label><input name="circle" type="checkbox" value="5" />星期四 </label>
                    <label><input name="circle" type="checkbox" value="6" />星期五 </label>
                    <label><input name="circle" type="checkbox" value="7" />星期六 </label>
                    <label><input name="circle" type="checkbox" value="1" />星期日 </label>
                </div>
            </div>
            <div>
            <button onclick="submit()">submit</button></div>
            <script type="text/javascript">
                function submit() {
                    var params = {
                        circle: getCircle(),
                    }
                    alert(JSON.stringify(params));
                    $.ajax({
                        url: basePath + "/sign",
                        contentType: 'application/json',
                        data: JSON.stringify(params),
                        type: "POST",
                        success: function(data) {
                        }
                    });
                }
                //获取选中的周期
                function getCircle() {
                    var str = "";
                    $("input[name='circle']").each(function() {
                        if($(this).prop("checked") == true) {
                            str += ($(this).val() + ",")
                        }
                    });
                    return str;
                }
            </script>
    </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序扫描二维码,正则校验

    demo 小程序扫码成功后带着参数跳转到指定页面 https://www.jianshu.com/p/413c5831ddd6

    王小婷
  • 如何把传统写法改成框架形式 es6http://www.expressjs.com.cn/

    王小婷
  • 复选框checkbox实现自定义样式

    在实际开发中,时长会遇到这样的问题,checkbox默认的样式有点难看,很多的时候,会更具ui设计图,来改变相应的checkbox的样式,这个时候就可以自定义一...

    王小婷
  • IOS UILabel设置阴影

    label.shadowColor=UIColor.lightGray label.shadowOffset=CGSize(width:2, height:2...

    用户5760343
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型

    2018-09-01 08:28

    walterlv
  • 腾讯云中的”丽音”窍门

    与市面上各种VoIP语音通话系统类似,腾讯云中的语音解决方案也需要面对包括PSTN电话机等接入形式,进行双向通话。由于历史原因,PSTN电话机采用了传统窄带...

    腾讯音视频实验室
  • 这里有一份BAT大厂Android面试超详细知识点,赶快收藏备战金九银十!

    金九银十面试季,相信大家肯定急需一套Android面试宝典,今天小编就给大家准备了我珍藏已久的Android高阶面试宝典,一份超级详细的Android面试必备知...

    Android技术干货分享
  • 在 Nowin 下运行 ASP.NET 5 Beta 2

    ASP.NET Mvc vNext 改名为 ASP.NET 5 , 看来距离正式发布已经不远了, 在发布之初就号称可以跨平台运行, 在发布的早期 alpha 版...

    beginor
  • Linux下Python连接MySQL异

    家里的电脑使用Linux操作系统,最近采集的数据需要存储到MySQL,本来使用web.py的时候使用MySQL是一切正常的,结果现在直接使用MySQLdb连接数...

    py3study
  • Interspeech 2017:腾讯音视频实验室王燕南博士论文入选,并获邀做口头报告

    2017年8月20日,语音通信领域国际顶级学术会议Interspeech 2017在瑞典斯德哥尔摩召开。 Interspeech是由国际语音通信协会ISCA(...

    腾讯音视频实验室

扫码关注云+社区

领取腾讯云代金券