[英]Radio button clears text boxes
我有两个单选按钮:单击第一个单选按钮,如果他们开始输入信息,则会出现三个文本框,然后改变主意并选择第二个单选按钮,它不会清除他们输入的文本。 所以我想弄清楚的是,如果有一种方法可以在选择新的单选按钮(同一组)时清除那些文本框中的文本。 任何帮助是极大的赞赏!
<input
type="radio"
value="Yes"
name="lien"
id="lien"
onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input
type="radio"
value="None"
name="lien"
id="nolien"
onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input
type="text"
name="lienlname"
id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input
type="text"
name="lienladdress"
id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input
type="text"
name="lienldate"
id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<br>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>
一种方法,使用您的问题/ JS Fiddle演示中的纯JavaScript:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
// getting all the input elements within '#div1' (using a CSS selector):
var inputs = document.querySelectorAll('#div1 input');
// iterating over those elements, using Array.prototype.forEach,
// and setting the value to '' (clearing them):
[].forEach.call(inputs, function (input) {
input.value = '';
});
}
}
JS小提琴演示 。
上述略微简洁的形式(或者,如果不是更简洁,重复次数更少):
function showhideForm(lien) {
var isYes = lien.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
JS小提琴演示 。
最后,一个版本远离突出的内联事件处理JavaScript( onclick
, onchange
等):
function showhideForm() {
// 'this' in the function is the radio-element to which
// the function is bound as an event-handler:
var isYes = this.value.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
// finding the elements with the name of 'lien':
var lienRadios = document.getElementsByName('lien');
// iterating over those elements, using forEach (again):
[].forEach.call(lienRadios, function (lien) {
// adding a listener for the 'change' event, when it
// occurs the showhideForm function is called:
lien.addEventListener('change', showhideForm);
});
JS小提琴演示 。
参考文献:
检查另一radio
时,您始终可以使用此功能:
$("#div1 .clearfix input:text").val("");
function showhideForm(lien) { if (lien == "Yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; } else if (lien == "None") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; $("#div1 .clearfix input:text").val("");//here use to clear inputs } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);"/><label for="lien">Lien</label> <input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label> <div id="div1" style="display:none"> <div class="clearfix"> <p> <label for="lname">Lienholder Name:</label> <input type="text" name="lienlname" id="lienlname"> </p> <p> <label for="laddress">Lienholder Address:</label> <input type="text" name="lienladdress" id="lienladdress"> </p> <p> <label for="ldate">Date of Lien:</label> <input type="text" name="lienldate" id="datepicker2"> </p> </div> </div> <div id="div2" style="display:none"> <!---You are not qualified to see this form.---> </div>
之后(讨厌)评论(开玩笑)js方法:
function showhideForm(lien) { if (lien == "Yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; } else if (lien == "None") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; //js container = document.getElementById('div1'); inputs = container.getElementsByTagName('input'); for (index = 0; index < inputs.length; ++index) { inputs[index].value = ""; } } }
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);" /> <label for="lien">Lien</label> <input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);" /> <label for="nolien">No Lien</label> <div id="div1" style="display:none"> <div class="clearfix"> <p> <label for="lname">Lienholder Name:</label> <input type="text" name="lienlname" id="lienlname"> </p> <p> <label for="laddress">Lienholder Address:</label> <input type="text" name="lienladdress" id="lienladdress"> </p> <p> <label for="ldate">Date of Lien:</label> <input type="text" name="lienldate" id="datepicker2"> </p> </div> </div> <div id="div2" style="display:none"> <!---You are not qualified to see this form.---> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.