如何使用jQuery基于单选按钮的切换清除div中的输入? [英] How to clear inputs within div based on toggle of radio button using jQuery?

问题描述

我有一个用户可以保存并返回编辑的表单.我在表单上有一些问题，这些问题会根据用户对上一个问题的回答，用其他问题来切换div(class = "details).这些问题类型有多种.

I have a form that the user can save and return to edit. I have questions on the form that toggle a div (class = "details) with additional questions based on the user's answer to the previous question. There are multiple of these question types.

我希望详细信息div中的子问题的答案清晰可见，如果用户选择否"(当子问题切换为隐藏时).如何将其实现到现有代码中?

I'd like the answers of the sub-questions within the details div to clear if the user selects 'no' (when the sub-questions are toggled to hidden). How would I implement that into my existing code?

示例: http://jsfiddle.net/XVtB8/1

jQuery:

$('.toggle').on('change',function(){

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })    

    $(this).parent().next('#details').toggle(showOrHide);

}).change()  

HTML:

<div>
    <label>Select #1:</label>
    <input type="radio" name="radio1" class="toggle" value="0">No    
    <input type="radio" name="radio1" class="toggle" value="1" checked="checked">Yes
</div>
<div id="details">
   <input type="text" value="123"><br>
   <input type="text" value="456">
</div>

<br>

<div>
    <label>Select #2:</label>
    <input type="radio" name="radio2" class="toggle" value="0">No    
    <input type="radio" name="radio2" class="toggle" value="1" checked="checked">Yes
</div>
<div id="details">
   <input type="text" value="789"><br>
   <input type="text" value="098">
</div>

<br>

<div>
    <label>Select #3:</label>
    <input type="radio" name="radio3" class="toggle" value="0" checked="checked">No    
    <input type="radio" name="radio3" class="toggle" value="1">Yes
</div>
<div id="details">
   <input type="text"><br>
   <input type="text">
</div>

<br>

<div>
    <label>Select #3:</label>
    <input type="radio" name="radio4" class="toggle" value="0">No    
    <input type="radio" name="radio4" class="toggle" value="1">Yes
</div>
<div id="details">
      <input type="text"><br>
      <input type="text">
</div>

推荐答案

您可以尝试执行以下操作:

You can try something like this:

$('.toggle').on('change',function(){

var showOrHide = false;

$(this).siblings('input[type=radio]').andSelf().each(function() {
    if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
})    

$(this).parent().next('#details').toggle(showOrHide);

if (showOrHide==false){
    $(this).parent().next('#details').find('input[type=text]').val('');
    $(this).parent().next('#details').find('input:checkbox').removeAttr('checked');

    // other fields type to clear   

} }).change() 

这是未更新的小提琴: http://jsfiddle.net/XVtB8/2/

here is un updated fiddle : http://jsfiddle.net/XVtB8/2/

这篇关于如何使用jQuery基于单选按钮的切换清除div中的输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！