Question

<table>
<tr>
<td align="right" nowrap="" style="padding-top:4px;"><span class="ff_fontname" style="padding-right:10px;">How did you find us?</span></td>
<td nowrap="" style="padding-top:4px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="fbook" value="Facebook" onclick="referrerCheck(this);" />
<label for="fbook" class="custlabel"><span class="ff_fontname">Facebook</span></label></td>
</tr>
<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="pinter" value="Pinterest" onclick="referrerCheck(this);" />
<label for="pinter" class="custlabel"><span class="ff_fontname">Pinterest</span></label></td>
</tr>
<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="friend" value="Friend" onclick="referrerCheck(this);" />
<label for="friend" class="custlabel"><span class="ff_fontname">Friend</span></label></td>
</tr>
<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="other" value="Other" onclick="referrerCheck(this);" />
<label for="other" class="custlabel"><span class="ff_fontname">Other</span></label></td>
</tr>

<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="text" class="input-text" name="address_referrer" id="other" value="" placeholder="Other.."  />
<label for="other" class="custlabel"></label></td>         
</tr>
</table>
<script>

function referrerCheck(objId){
  var max = document.cartform.address_referrer.length;
  for (var idx = 0; idx < max; idx++) {
    if (eval("document.cartform.address_referrer[" + idx + "].checked") == true) {
  		document.cartform.address_referrer[idx].checked = false;
    }
  }
 objId.checked = true;
}
</script>

网站上有“您是如何找到我们的？”填写结算数据时的部分。现在有一些javascript使得单选按钮充当复选框。选中哪个区域会将值添加到数据库中。因此，如果选中“Facebook”复选框，则会将值“Facebook”添加到数据库中。

我需要“其他”输入类型作为“文本”输入字段而不是“复选框”字段，因此客户可以指定他们找到我们的位置。我能够使文本输入字段工作，但之后上面的复选框不再起作用。

我需要底部的“其他”复选框作为文本输入并尝试了代码段中的代码，但它会导致复选框不再起作用。

我做错了什么？文本字段可以作为一个复选框，因此它不会搞砸javascript吗？

Answer 1

您对其他人的输入文字必须有其他名称，否则会导致价值冲突，您不能将两种不同的含义信息保存在同一个地方。

看看我在这里做了什么：

＆＃13;

function referrerCheck(option) {
  console.log(option.value);
}

＆＃13;

<table>
<tr>
<td align="right" nowrap="" style="padding-top:4px;"><span class="ff_fontname" style="padding-right:10px;">How did you find us?</span></td>
<td nowrap="" style="padding-top:4px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="fbook" value="Facebook" onclick="referrerCheck(this);" />
<label for="fbook" class="custlabel"><span class="ff_fontname">Facebook</span></label></td>
</tr>
<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="pinter" value="Pinterest" onclick="referrerCheck(this);" />
<label for="pinter" class="custlabel"><span class="ff_fontname">Pinterest</span></label></td>
</tr>
<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="friend" value="Friend" onclick="referrerCheck(this);" />
<label for="friend" class="custlabel"><span class="ff_fontname">Friend</span></label></td>
</tr>
<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="checkbox" class="custcheck" name="address_referrer" id="other" value="Other" onclick="referrerCheck(this);" />
<label for="other" class="custlabel"><span class="ff_fontname">Other</span></label></td>
</tr>

<tr>
<td align="right" valign="middle" nowrap="" style="padding-right:10px;"></td>
<td nowrap="" style="padding-top:12px;">
<input type="text" class="input-text" name="other_address_referrer" id="other" value="" placeholder="Other.."  />
<label for="other" class="custlabel"></label></td>         
</tr>
</table>

＆＃13;

Answer 2

将代码修改为：

<input type="checkbox" class="custcheck" name="address_referrer" id="other" value="Other" onclick="referrerCheck(this); enableOtherTextbox(this);" /> 
<label for="other" class="custlabel"><span class="ff_fontname">Other</span></label>
<input type="text" class="input-text" name="address_referrer" id="other" value="" placeholder="Other.."  />




<script>
    function enableOtherTextbox(chkBox)
    {
        if(chkBox.checked == true){
            document.getElementById('other').disabled = false;
        }
        else{
            document.getElementById('other').disabled = true;
        }
    }
</script>

文本输入可以作为复选框

2 个答案: