文本输入可以充当复选框吗

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”将添加到数据库中。

我需要“其他”输入类型是“文本”输入字段而不是“复选框”字段，以便客户可以指定他们在哪里找到我们。我能够使文本输入字段正常工作，但随后上面的复选框不再起作用。

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

我做错了什么？文本字段可以充当复选框，这样它就不会搞砸 javascript？

Answer 1

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

看看我在这里的表现：

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

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

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>