隱藏文本框后刪除它們的內容

Question

我有一個HTML程序，其中有一個清單。 當我單擊清單中的一個項目時，它將顯示一個文本框，而當我取消選中該項目時，該文本框將隱藏。 如何設置它，以便在取消選中某個項目時清除復選框的內容，或者至少將文本框引用的ID值設置為空值？

下面是我的代碼：

<html lang="en"  >
<head>

        <script src="jStorage/json2.min.js"></script>
        <script src="jStorage/jquery-1.12.2.min.js"></script>
        <script src="jStorage/jstorage.min.js"></script>


<body>

<form action="">

<font size=2><table border=0 cellspacing=0 cellpadding=0 width=100%><tr>
<td width='40%' valign='center' align='right'>Notifications :&nbsp;</td>
<td align='left'>
<!--- -->
<input type="checkbox" id="notification_1" value="Billing" class="master_enable_cb" name="master">Billing
<div class="master">
    <input type="text" id="notification_1_info" name="master">
</div>
<br>
<!--- -->
<input type="checkbox" id="notication_2" value="Address" class="address_enable_cb" name="address">Address
<div class="address">
<input type="text" id="notification_2_info" name="address">
</div>
<br>
<!--- -->
<input type="checkbox" id="notification_3" value="Phone" class="phone_enable_cb" name="phone">Phone Number
<div class="phone">
    <input type="text" id="notification_3_info" name="phone">
</div>
<br>
<!--- -->
<input type="checkbox" id="notification_4" value="Other Urgent of Special Request" class="other_enable_cb" name="other">Other Urgent/Special Notes or Requests
 <div class="other">
    <input type="text" id="notification_4_info" name="other">
</div>
<br>

<script>
jQuery(document).ready(function($) {
  $('input.master_enable_cb').change(function(){
    if ($(this).is(':checked'))
    $(this).next('div.master').show();
  else
    $(this).next('div.master').hide();

}).change();

$('input.address_enable_cb').change(function(){
if ($(this).is(':checked'))
    $(this).next('div.address').show();
else
    $(this).next('div.address').hide();
}).change();

$('input.phone_enable_cb').change(function(){
if ($(this).is(':checked'))
    $(this).next('div.phone').show();
else
    $(this).next('div.phone').hide();
}).change();

$('input.other_enable_cb').change(function(){
if ($(this).is(':checked'))
    $(this).next('div.other').show();
else
    $(this).next('div.other').hide();
}).change();
});
</script>




</body>
</html>

Answer 1

您可以使用$(ITEM_SELECTOR).val('');刪除文本輸入的值$(ITEM_SELECTOR).val('');

查看您的代碼，您可以修改每行看起來像

else
    $(this).next('div.other').hide();
}).change();

成為

else {
    $(this).next('div.other').hide();
    $(this).next('div.other').find('input[type=text]').val('');
}
}).change();

我會通過對每個HTML元素組執行以下操作來對整個事情進行一些更改並減少JS代碼的數量：

<div class="form_field">
    <input type="checkbox" id="notification_1" value="Billing" class="toggle_cb" name="master">Billing
    <div class="master">
        <input type="text" id="notification_1_info" name="master">
    </div>
</div>

請注意HTML塊周圍的.form_field容器。 這有助於更好地確定范圍，並在jQuery中為您提供更多導航選項（所有內容統一在該父項下）。 我會為每個項目執行此操作，然后將javascript更改為如下所示的一個代碼塊：

jQuery(document).ready(function($) {

    $('div.form_field > input[type=checkbox]').change(function(){
        if ($(this).is(':checked')) {
            $(this).next('div').show();
        }
        else {
            $(this).next('div').hide()
                .find('input[type=text]').val('');
        }
    }).change();
});

這改變了您必須編寫（或重寫）的代碼量，這是嘗試采用的良好心態。

Answer 2

您可以嘗試以下方法：

$(document).ready(function() {
    function changeElement(element, type) {
        element.on('change', function() {
            if ($(this).is(':checked')) {
                $(this).next('div.' + type).show();

                return;
             }

            $(this).next('div.' + type).hide();
            $(this).find('input[name=' + type + ']').val('');
        });
    }

    changeElement($('input.master_enable_cb'), 'master');
    changeElement($('input.address_enable_cb'), 'address');
    changeElement($('input.phone_enable_cb'), 'phone');
    changeElement($('input.other_enable_cb'), 'other');

});

隱藏文本框后刪除它們的內容

問題描述

2 個解決方案

解決方案1
0 2016-09-16 20:52:55

解決方案2
0 2016-09-16 21:17:26

隱藏文本框后刪除它們的內容

問題描述

2 個解決方案

解決方案1 0 2016-09-16 20:52:55

解決方案2 0 2016-09-16 21:17:26

解決方案1
0 2016-09-16 20:52:55

解決方案2
0 2016-09-16 21:17:26