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 = '';
    }

＆＃13;

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 = '';
    }
}

＆＃13;

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

＆＃13;

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

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

HTTPS

如何通过单击另一个单选按钮清除第一个单选按钮文本框值

3 个答案: