表格:如果选中了单选按钮,则启用textarea

时间:2016-03-22 15:09:24

标签: forms textarea radio

当选择“其他地址”的单选按钮时,用户如何在textarea中输入其他地址,如下所示:

<br><input type="radio" name="br_address" value="Address 1" checked> Address 1
<br><input type="radio" name="br_address" value="Address 2">  Address 2
<br><input type="radio" name="br_address" value="Address 3">  Address 3
<br><input type="radio" name="br_address" value=""> Others Address
<br><textarea name="br_address" rows="3" cols="40" disabled></textarea>

非常感谢你的帮助和帮助。先支持!

1 个答案:

答案 0 :(得分:1)

当选中其他地址字段时,您可以使用一些javascript来切换textarea。像这样的东西会起作用:

<强> HTML

<br><label><input type="radio" name="br_address" value="Address 1" checked> Address 1</label>
<br><label><input type="radio" name="br_address" value="Address 2">  Address 2</label>
<br><label><input type="radio" name="br_address" value="Address 3">  Address 3</label>
<br><label><input type="radio" name="br_address" value="" id="addressOther"> Others Address</label>
<br><textarea name="br_address" rows="3" cols="40" disabled id="addressField"></textarea>

<强>的JavaScript

var addressOther = document.querySelectorAll('input[name="br_address"]');
var addressField = document.getElementById('addressField');
var tempAddress = "";

for(var i = 0; i < addressOther.length; i++) {
    addressOther[i].addEventListener("change", addressHandler);
}


function addressHandler() {
    if(this.id == "addressOther") {
    addressField.disabled = false;
    addressField.value = tempAddress;
  } else {
    tempAddress = addressField.value;
    addressField.value = "";
    addressField.disabled = true;
  }
}

你可以看到它在这个JS小提琴中工作:https://jsfiddle.net/pkqm6f52/

希望有所帮助!