jquery切換和重置表單元素

我需要根據複選框選擇來顯示和隱藏某些表單元素。jquery切換和重置表單元素

這是我的HTML：

<div class="form-group"> 
    <label> 
     <input name="address_check" value="1" type="checkbox"> 
     <span class="lbl"> Yes, My postal address is different</span> 
    </label> 
</div> 

<div id="address2"> 
    <div class="form-group"> 
     <label class="control-label" for="street_no">Street No:</label> 
     <div class="col-xs-12 col-sm-9"> 
       <input type="text" name="street_no" class="col-xs-12 col-sm-4" /> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="control-label" for="street_name">Street Name:</label> 
     <div class="col-xs-12 col-sm-9"> 
      <input type="text" name="street_name" class="col-xs-12 col-sm-4" /> 
     </div> 
    </div> 
</div>

在這裏，我想顯示#address2 DIV如果address_check複選框選中和其他明智它應該是隱藏。

這我怎麼試了。

$('input[name="address_check"]').bind('change',function(){ 
    $('#address2').fadeToggle(!$(this).is(':checked')); 
});

我的問題是我想表單元素復位內address2格時，這是切換了。重置意味着我想要清空這些元素。

有人可以告訴我該怎麼做嗎？謝謝。

來源

2015-11-14 user3733831

您可以切換呢？ – void

@void，是的，我可以 – user3733831

嘗試做：

$('#address2').find("input").val(""); 

$("#address2").find('select option:first').prop('selected',true);

工作fiddle

來源

2015-11-14 06:12:19 void

是的，它的工作。但是如果我在該目標DIV中有一個選擇框。我能做什麼。我試過這樣的東西 - '.find（「select」）。prop（'selectedIndex'，0）;'但它對我無效 – user3733831

void，我無法讓它工作。我的'select'沒有被重置。 – user3733831

等待讓我試一下小提琴.. – void

試試這個

$('input[name="address_check"]').bind('change',function(){ 
    $('#address2').fadeToggle(!$(this).is(':checked')); 

     $('#address2').find("input").val(""); 

});

來源

2015-11-14 06:16:10

試試這個：

var address2 = $('#address2'); 
$('input[name="address_check"]').bind('change',function(){ 
    var isChecked = $(this).is(':checked'); 

    isChecked ? address2.fadeIn() : address2.fadeOut(); 

    if(!isChecked) 
    { 
     address2.find('input, textarea').val(''); 
     address2.find('select').prop('selectedIndex',0); 
    } 
});

來源

2015-11-14 06:34:23 Azim

要做到這一點最簡單的方法是使用：

$("#address2 :input").val(""); 
    $("#address2 :select").prop('selected',false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script> 
 

 
$(function(){ 
 
\t $('input[name="address_check"]').bind('change',function(){ 
 
\t \t $('#address2').fadeToggle(!$(this).is(':checked')); 
 
\t \t $("#address2 :input").val(""); 
 
\t \t $("#address2 :select").prop('selected',false); 
 
\t \t }); 
 
}); 
 

 
</script> 
 

 
<div class="form-group"> 
 
    <label> 
 
     <input name="address_check" value="1" type="checkbox"> 
 
     <span class="lbl"> Yes, My postal address is different</span> 
 
    </label> 
 
</div> 
 

 
<div id="address2"> 
 
    <div class="form-group"> 
 
     <label class="control-label" for="street_no">Street No:</label> 
 
     <div class="col-xs-12 col-sm-9"> 
 
       <input type="text" name="street_no" class="col-xs-12 col-sm-4" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label class="control-label" for="street_name">Street Name:</label> 
 
     <div class="col-xs-12 col-sm-9"> 
 
      <input type="text" name="street_name" class="col-xs-12 col-sm-4" /> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="form-group"> 
 
     <label class="control-label" for="street_name">select Name:</label> 
 
     <div class="col-xs-12 col-sm-9"> 
 
      <select name="name" class="col-xs-12 col-sm-4" > 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
       </select> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-11-14 06:49:10

謝謝如何重置下拉列表？ – user3733831

@ user3733831嘗試更新的一個。 –

jquery切換和重置表單元素

回答

相關問題