Question

我正在尝试使用getElementById从我的表单中检索一些元素。一切都好。我可以在未选中时检查除复选框之外的所有元素。我该怎么办？

这是我的jquery代码：

x$("input#surveymodsubmit").click(function() {
            var resp = confirm("<?php echo Yii::t('general', 'Do you want the notification emails will be sent?'); ?>");
            if(resp == true) {
                $(document.getElementById("token-form")).append('<input type="hidden" id="SendMails" name="SendMails" value="YES" />');
            }
            else {
                $(document.getElementById("token-form")).append('<input type="hidden" id="SendMails" name="SendMails" value="NO" />');
            }
            var data = serialize(document.getElementById("token-form"));
            if(!checkRequiredBeforeSubmit(data)) return;
            x$().xhr('<?php echo $this->createUrl('token/updateMotives', array('id'=>$model->id)); ?>', {
                method: 'POST',
                async: true,
                data: urlstringserialize(data),
                callback: function() {$("div.submitmotives").html(data); $("div.submitmotives").show(1000); $("div.submitmotives").delay(4000).hide(1000);}
            });

以下是我的表格示例：

<form id="token-form" action="/index.php?r=token/view&amp;id=2483982" method="post"><div class="section row" id="divQ1">
            <div class="section row principal_question">
        <label class="question_nps">¿Recomendaria usted el Algarve Natur a sus colegas, familiares o amigos?  </label>      </div>



<div class="section row questionhelpmaxmin">
            <label class="col one-third question_help_min">No recomendaria</label>      <div class="col one-third">&nbsp;</div>
            <label class="col one-third question_help_max">Recomendaria activamente</label> </div>
<div class="section row">
    <div class="col one emptynum"></div>
    <div class="col one"><label class="radionum ">0</label><input value="0" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">1</label><input value="1" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">2</label><input value="2" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">3</label><input value="3" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">4</label><input value="4" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">5</label><input value="5" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">6</label><input value="6" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">7</label><input value="7" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">8</label><input value="8" class="radionpsnum" checked="checked" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum ">9</label><input value="9" class="radionpsnum" name="Q1" id="Q1" type="radio"></div><div class="col one"><label class="radionum radionumlast">10</label><input value="10" class="radionpsnum" name="Q1" id="Q1" type="radio"></div>     <div class="col one emptynum"></div>
</div>

<div class="section row principal_question">
<label>Por favor indique qué es lo que mas valora de nuestros servicios</label></div>
<div class="section row"><label class="checkbox"><input checked="checked" value="1" name="Q3_QO6" id="Q3_QO6" type="checkbox">Las mejores instalaciones que he visto nunca.</label></div><div class="section row"><label class="checkbox"><input value="1" name="Q3_QO7" id="Q3_QO7" type="checkbox">Instalaciones en buen estado</label></div><div class="section row"><label class="checkbox"><input value="1" name="Q3_QO8" id="Q3_QO8" type="checkbox">Personal amable y servicial</label></div><div class="section row"><label class="checkbox"><input value="1" name="Q3_QO9" id="Q3_QO9" type="checkbox">Otros motivos. Por favor especifique en Comentarios.</label></div>
</div>
<div class="section row" id="divQ4" style="display: none;">

<div class="section row">
<label style="display: block;">Si desea hacer cualquier comentario por favor hágalo aquí.</label>   </div>
<div id="stextarea"><textarea name="Q4" id="Q4"></textarea></div>

最后，这是我从console.log获得的：

 Object {Q1: "8", Q4: "", Q394: "8", "": "1", yt0: "Modificar"…}"": "1"Q1: "8"Q4: ""Q394: "8"SendMails: "NO"yt0: "Modificar"

正如你所看到的那样，没有Q3元素，无论是否勾选复选框，这都是我需要的。

这是我查看复选框的内容：

Object {Q1: "8", Q3_QO6: "1", Q4: "", Q394: "8", "": "1"…}"": "1"Q1: "8"Q3_QO6: "1"Q4: ""Q394: "8"SendMails: "YES"yt0: "Modificar"

我想要这样的事情：

Object {Q1: "8", Q3_QO6: "", Q4: "", Q394: "8", "": "1"…}"": "1"Q1: "8"Q3_QO6: "1"Q4: ""Q394: "8"SendMails: "YES"yt0: "Modificar"

Answer 1

这是HTML标准，如果选中复选框，表单POST仅包含复选框元素。否则，控件不是已发布的键值对的一部分。例如：

<input type='checkbox' checked name='control1' />
<input type='checkbox' name-'control2' />

POST数据如下所示：control1=on

jQuery遵循此标准的serialize（）方法。以下是jQuery文档（found here）的摘录：

注意：只有“成功控件”被序列化为字符串。没有由于表单未提交，因此提交按钮值已序列化使用按钮。对于要包含在表单元素中的值序列化字符串，该元素必须具有name属性。 来自的值复选框和单选按钮（“radio”或“checkbox”类型的输入）只有在选中它们时才会包含它们。来自文件选择元素的数据没有序列化。

有几种方法可以解决这个问题：

1）除非你在POST中获得控件，否则将服务器端的复选框的值默认为“unchecked”;然后显然检查了这个值（虽然我仍然确保值= on）。

2）创建一个隐藏字段，用于存储每个复选框的状态。默认要取消选中的状态，并通过将函数绑定到复选框的单击或更改事件来切换复选框的状态。

getElementById不能用于取消选中复选框

1 个答案: