选中的复选框不起作用？

Posted 2023-05-08

技术标签:

【中文标题】选中的复选框不起作用？【英文标题】：Checked Checkbox Not Working? 【发布时间】：2014-07-15 11:31:24 【问题描述】：

我有一个发布到 php 脚本的 html 表单。除复选框外，一切正常。当它被选中时，该值没有被发布。

HTML：

<input name="test" id="checkbox-02" type="checkbox" value="1" />

PHP：

if(!isset($_POST['test'])) 
  $eventRepeat="No";


if(isset($_POST['test'])) 
  $eventRepeat="Yes";

当此代码运行时，$eventRepeat 始终显示为“否”。我尝试使用命令“print_r($_POST)”并且所有输入都被发布，除了复选框，即使它被选中。

有什么想法会导致这种情况吗？我确实运行了 jQuery，所以当它被选中时会出现两个 div。这会以某种方式干扰吗？这是 jQuery：

$(document).ready(function () 
$('#checkbox-02').change(function () 
    if (!this.checked) 
    //  ^
       $('#repeatUntilDIV').fadeIn('slow');
       $('#repeatFrequencyDIV').fadeIn('slow');
);
);

作为参考，这里是完整的代码：

           <form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="" method="post">
        <div class="form-group">
            <label for="inputEventTitle" class="col-lg-2 control-label">Event Title</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" id="inputEventTitle" name="inputEventTitle" placeholder="Event Title" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEventDescription" class="col-lg-2 control-label">Description</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" id="inputEventTitle" name="inputEventDescription" placeholder="Event Description" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEventStartTime" class="col-lg-2 control-label">Start Time</label>
            <div class="col-lg-10">
              <select name="inputEventStartTime" class="form-control" id="dp1" required>
                <option label="Start Time">
                <option value="12:00AM">12:00AM</option>
                <option value="12:15AM">12:15AM</option>
                <option value="12:30AM">12:30AM</option>
                <option value="12:45AM">12:45AM</option>
                <option value="1:00AM">1:00AM</option>
              </select>
          </div>
        </div>  
        <div class="form-group">
            <label for="inputEventEndTime" class="col-lg-2 control-label">End Time</label>
            <div class="col-lg-10">
              <select name="inputEventEndTime" class="form-control" id="dp1" required>
                <option label="End Time">
                <option value="1:00AM">1:00AM</option>
                <option value="1:15AM">1:15AM</option>
                <option value="1:30AM">1:30AM</option>
                <option value="1:45AM">1:45AM</option>
                <option value="2:00AM">2:00AM</option>
              </select>                </div>
        </div>                      
        <div class="form-group">
          <label class="control-label col-sm-2">Date</label>
          <div class="col-sm-6">
            <input id="dp1" name="inputEventDate" type="text" size="16" class="form-control" required>
          </div>
        </div>
         <div class="form-group">
            <label for="inputEventDate" class="col-lg-2 control-label">Repeat?</label>
            <div class="col-lg-10 checkboxes">
              <label class="label_check" for="checkbox-02"> </label>
              <input name="test" id="checkbox-02" type="checkbox" value="1" /> Yes, I want to repeat this event.
            </div>
        </div>
         <div class="form-group" id="repeatUntilDIV" style="display:none;">
            <label for="inputEventEndDate" class="col-lg-2 control-label">Repeat Until</label>
            <div class="col-lg-10">
              <input name="inputEventEndDate" id="eventEndDate" type="text" placeholder="End Date" class="form-control">                                            
            </div>
        </div>  
         <div class="form-group" id="repeatFrequencyDIV" style="display:none;">
            <label for="inputEventFrequency" class="col-lg-2 control-label">Repeat Every</label>
            <div class="col-lg-10">
             <select name="inputEventFrequency" class="form-control" id="dp1">
                <option label="Repeat Every">
                <option value="1">Repeat Every Day</option>
                <option value="2">Repeat Every Other Day</option>
                <option value="7">Repeat Every Week</option>
                <option value="14">Repeat Every Other Week</option>
                <option value="30">Repeat Every Month</option>
              </select>

            </div>
        </div>                          
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
    <input type="submit" name="addPrimaryEvent" class="btn btn-success" value="Submit" />
       </form>

我从 var_dump($_POST) 得到这个：

  array(8) 
  ["inputEventTitle"]=>
  string(5) "Title"
  ["inputEventDescription"]=>
  string(11) "Description"
  ["inputEventStartTime"]=>
  string(6) "2:00AM"
  ["inputEventEndTime"]=>
  string(6) "3:00AM"
  ["inputEventDate"]=>
  string(10) "05-26-2014"
  ["inputEventEndDate"]=>
  string(10) "05-29-2014"
  ["inputEventFrequency"]=>
  string(1) "1"
  ["addPrimaryEvent"]=>
  string(6) "Submit"

【问题讨论】：

粘贴表单和js代码您是否 100% 肯定该复选框位于 <form></form> 元素的上下文中？查看您的 HTML 会有所帮助。 @JakeGould - 是的。复选框发布成功前后都有字段。我建议在继续之前快速验证您的代码。有几个重复的 ID，你的 div 没有关闭，虽然浏览器支持它，但你的表单不应该有一个空的 action 属性。（使用?） 【参考方案1】：

非常不清楚为什么这不起作用。但是我注意到 HTML 标记中的不一致和不平衡以及一个空的 action="" 不是 HTML5 有效的。详情请见this great answer over here。

所以我将其设置为#。您可能希望将其实际更改为 PHP 脚本的完整文件名或路径，例如 action="form.php"。或者你可以像这样完全忽略它：

<form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="#" method="post">