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切换和重置表单元素

回答

相关问题