簡體   English   中英

單選按鈕清除文本框

[英]Radio button clears text boxes

我有兩個單選按鈕:單擊第一個單選按鈕,如果他們開始輸入信息,則會出現三個文本框,然后改變主意並選擇第二個單選按鈕,它不會清除他們輸入的文本。 所以我想弄清楚的是,如果有一種方法可以在選擇新的單選按鈕(同一組)時清除那些文本框中的文本。 任何幫助是極大的贊賞!

http://jsfiddle.net/k0paz2pj/

    <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( onclickonchange等):

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> &nbsp;&nbsp;&nbsp;<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> &nbsp;&nbsp;&nbsp; <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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM