如何通过单击另一个无线电按钮来清除第一个广播按钮文本框值

Question

我有2个广播按钮。在单击单击"单击单击"按钮将打开，当单击另一个单击单个单击按钮时，第二个文本框将打开..现在我想要单击第二个广播按钮第一个广播电台时我想要按钮应清楚文本框。

查看：

<label>Assign Credit Limit Amount/Days</label><br>
<label for="chkYes">Credit Amount</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="chkNo">Day</label>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" />
<div id="creditAmount" style="display: none"><br>
    <label for="creditAmount">Credit Amount</label>
    <input type="text" class="form-control" id="creditAmount" placeholder="creditAmount" name="creditAmount" maxlength="128">
</div>
<div id="day" style="display: none"><br>
    <label for="day">Day</label>
    <input type="text" class="form-control" id="day" placeholder="day" name="day" maxlength="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

javaScript：

<script type="text/javascript">
    function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var chkNo = document.getElementById("chkNo");
        var creditAmount = document.getElementById("creditAmount");
        creditAmount.style.display = chkYes.checked ? "block" : "none";
        var day = document.getElementById("day");
        day.style.display = chkNo.checked ? "block" : "none";
    }
</script>

Answer 1

添加一个if条件，对于true，请重置输入的值：

if (chkNo.checked) {
      creditAmount.querySelector('input').value = '';
    }

function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    var chkNo = document.getElementById("chkNo");
    var creditAmount = document.getElementById("creditAmount");
    creditAmount.style.display = chkYes.checked ? "block" : "none";
    var day = document.getElementById("day");
    day.style.display = chkNo.checked ? "block" : "none";
    
    if (chkNo.checked) {
      creditAmount.querySelector('input').value = '';
    }
}

<label>Assign Credit Limit Amount/Days</label><br>
                                <label for="chkYes">Credit Amount</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="radio" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <label for="chkNo">Day</label>&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" />
                                    <div id="creditAmount" style="display: none"><br>
                                    <label for="creditAmount">Credit Amount</label>
                                    <input type="text" class="form-control" id="creditAmount" placeholder="creditAmount" name="creditAmount" maxlength="128">
                                    </div>
                                    <div id="day" style="display: none"><br>
                                    <label for="day">Day</label>
                                    <input type="text" class="form-control" id="day" placeholder="day" name="day" maxlength="128">
                                    </div>

Answer 2

使用纯JavaScript清除输入字段的值：

document.getElementById("creditAmount").value = "";

在您的情况下，这将无法使用，因为您的html中有多个creditAmount ID：

<div id="creditAmount" style="display: none"><br>

和

<input type="text" class="form-control amount-input" id="creditAmount" placeholder="creditAmount" name="creditAmount" maxlength="128">

Answer 3

您可以添加条件以跟踪单击哪个按钮以及要清除的输入文本。

<script type="text/javascript">
 function ShowHideDiv() {
 var chkYes = document.getElementById("chkYes");
 var chkNo = document.getElementById("chkNo");
 var creditAmount = document.getElementById("creditAmount");
 creditAmount.style.display = chkYes.checked ? "block" : "none";
 var day = document.getElementById("day");
 day.style.display = chkNo.checked ? "block" : "none";
 # condition goes here to clear input value
 chkYes.checked ? creditAmount.getElementsByTagName('input')[0].value = "" : day.getElementsByTagName('input')[0].value = ""
</script>