2016-04-07 2 views
0

У меня есть две радиокнопки с названием метки A & B и две группы текстовых полей с именами классов groupA и groupB.Мое требование: когда пользователь проверяет радиообъект A, тогда все значения из Групповые текстовые поля B очищаются, и когда пользователь проверяет Radiobutton B, текстовые поля GroupB снова заполняются их исходными значениями, а значения текстовых полей группы A стираются наоборот. Для этого я могу очистить значения текстовых полей на основе класса. Но как заполнить все предыдущие значения, когда пользователь проверяет один из радиообъектов? Ниже мой код.радиокнопки проверить и снять флажок удалить и заменить входные значения

jQuery(function(){ 
    jQuery("#id1").click(function() {  
      jQuery(".groupB").each(function() 
      { 
       jQuery('input.groupB[type="text"]').val(''); 
      }); 
     } 
    }); 

jQuery("#id2").click(function() {  
      jQuery(".groupA").each(function() 
      { 
       jQuery('input.groupA[type="text"]').val(''); 
      }); 
     } 
    }); 

}); 

Любая помощь была бы принята с благодарностью.

+0

Вы можете создать рабочую версию кода на jsfiddle.net? Подход, который я хотел бы сделать, - сохранить предыдущие значения текстовых полей в скрытых полях. –

+0

Привет, я сожалею об этом, потому что я не знаю, как это сделать на jsfiddle.net. Спасибо за ваш быстрый resposne. – user3408779

+0

Какую версию jQuery вы используете? –

ответ

1

Вы не показывали свой HTML, поэтому я не уверен, что у меня есть поля справа. Но вот что я придумал:

<body> 
    <form> 
    <input id="id1" type="radio" name="test" value="A" />Group A 
    <input type="hidden" name="hidden_a1" /> 
    <input type="hidden" name="hidden_a2" /> 
    <input class="groupA" type="text" name="text_a1" disabled="disabled" /> 
    <input class="groupA" type="text" name="text_a2" disabled="disabled" /> 
    <br /> 
    <input id="id2" type="radio" name="test" value="B" />Group B 
    <input type="hidden" name="hidden_b1" /> 
    <input type="hidden" name="hidden_b2" /> 
    <input class="groupB" type="text" name="text_b1" disabled="disabled" /> 
    <input class="groupB" type="text" name="text_b2" disabled="disabled" /> 
    </form> 
</body> 

и вот код JavaScript:

$(document).ready(function() { 
    $('#id1').on('click', { 
    show: 'A', 
    hide: 'B' 
    }, choose_group); 
    $('#id2').on('click', { 
    show: 'B', 
    hide: 'A' 
    }, choose_group); 
}); 

function choose_group(event) { 
    $('.group' + event.data.show).each(function(index) { 
    $(this).prop('value', $('[name="' + $(this).prop('name').replace('text', 'hidden') + '"]').prop('value')); 
    $(this).prop('disabled', false); 
    }); 
    $('.group' + event.data.hide).each(function(index) { 
    $('[name="' + $(this).prop('name').replace('text', 'hidden') + '"]').prop('value', 
     $(this).prop('value')); 
    $(this).prop('value', ''); 
    $(this).prop('disabled', true); 
    }); 
} 
+0

Здесь вы можете попробовать: https://jsfiddle.net/RocketDave/a38yt3yy/2/ –

+0

HI David, спасибо вам большое, это работает для меня .. – user3408779