可以將文本輸入作爲一個複選框

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) { 
 
    \t \t document.cartform.address_referrer[idx].checked = false; 
 
    } 
 
    } 
 
objId.checked = true; 
 
} 
 
</script>

網站上有一個「你是怎麼找到我們的？」部分填寫賬單數據。現在有一些JavaScript使單選按鈕充當複選框。所檢查的任何區域將值添加到數據庫。因此，如果「Facebook」複選框被選中，則值「Facebook」被添加到數據庫中。

我需要「其他」輸入類型爲「文本」輸入字段而不是「複選框」字段，因此客戶可以指定他們找到我們的位置。我能夠獲得文本輸入字段的工作，但然後上面的複選框不再工作。

我需要底部「其他」複選框作爲文本輸入並嘗試了代碼片段中的代碼，但它會導致複選框不再起作用。

我在做什麼錯？該文本字段可以充當一個複選框，所以它不會搞砸了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>