Question

帮助，我的复选框有问题。我正在尝试使用复选框制作表单。但是，当我只勾选一个复选框时，也会勾选所有复选框，并将数据插入数据库。

这是我的代码，

$(document).ready(function () {

        function showComment() {
            $.ajax({
                type: "post",
                url: "registerarray.php",
                data: "action=showcomment",
                success: function (data) {
                    $("#comment").html(data);
                }
            });
        }
        showComment();

        $("#send").click(function () {

            var starttime = $("#starttime").val();
            var endtime = $("#endtime").val();
            var monday = $("#monday").val();
            var tuesday = $("#tuesday").val();
            var wednesday = $("#wednesday").val();
            var thursday = $("#thursday").val();
            var saturday = $("#saturday").val();
            var friday = $("#friday").val();
            var sunday = $("#sunday").val();

            var dataString = "starttime1=" + starttime + "&endtime1=" + endtime + "&monday1=" + monday + "&tuesday1=" + tuesday + "&wednesday1=" + wednesday + "&thursday1=" + thursday + "&friday1=" + friday + "&saturday1=" + saturday + "&sunday1=" + sunday + "&action=addcomment";

            $.ajax({
                type: "post",
                url: "registerarray.php",
                data: dataString,
                success: function (data) {
                    showComment();
                    $("#formTable")[0].reset();

                }

            });

        });
    });

<div id="formbox"> 
                <form id="formTable">

                    <div class="form-group">
                        <div class="col-md-2">
                            <lable>Start time</lable>
                            <input type="text" class="form-control" name="startTime" id="starttime">
                        </div>
                        <div class="col-md-2">
                            <lable>End time</lable>
                            <input type="text" class="form-control" name="endTime" id="endtime">
                        </div>
                    </div>

                    <div class="form-group">
                        <lable>Monday</lable>
                        <input type="checkbox" name="Monday" value="1" id="monday">
                        <lable>Tuesday</lable>
                        <input type="checkbox" name="Tuesday" value="1" id="tuesday">
                        <lable>Wednesday</lable>
                        <input type="checkbox" name="Wednesday" value="1" id="wednesday">
                        <lable>Thursday</lable>
                        <input type="checkbox" name="Thursday" value="1" id="thursday">
                        <lable>Friday</lable>
                        <input type="checkbox" name="Friday" value="1" id="friday">
                        <lable>Saturday</lable>
                        <input type="checkbox" name="Saturday" value="1" id="saturday">
                        <lable>Sunday</lable>
                        <input type="checkbox" name="Sunday" value="1" id="sunday">
                    </div>

                    <div class="form-group">
                        <input type="button" class="btn btn-success" value="Add" id="send">
                    </div>

                </form>
            </div>

请帮助谢谢

Answer 1

您需要使用.is(":checked")方法代替val()方法，如下所示。

var monday = $("#monday").is(":checked");

.val()始终返回checkbox的值，无论它是否为checked。

Answer 2

你需要改变一些事情。首先，您需要阅读检查内容：

  var monday = $('#monday').is(':checked') //true if is checked

您需要更改标签标签，因为您正在撰写lable及其错误的

   <label for="monday">Monday</label>

Answer 3

您也可以使用其他答案，但它们都是正确的，但还有其他选项也可用，根据您的代码我可以看到您想要表单中的所有元素并想要调用ajax，为此你也可以使用serialize（）选项。

var parameters = $("#formTable").serialize();
console.log(parameters);

检查此网址serialize elements以获取更多详细信息。

Answer 4

我用它来解决它，

if(document.getElementById('monday').checked) {
                var monday = $("#monday").val();
            }

感谢所有帮助过的人：）

复选框不起作用

4 个答案: