關於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>

原文作者:祈澈姑娘 技術博客:https://www.jianshu.com/u/05f416aefbe1
90後前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章