单选按钮选中和取消选中删除和替换输入值答案

【问题标题】：radio buttons check and uncheck remove and replace input values单选按钮选中和取消选中删除和替换输入值
【发布时间】：2020-06-10 07:46:32
【问题描述】：

我有两个带有标签名称 A 和 B 的单选按钮和两组带有类名称 groupA 和 groupB 的文本框。我的要求是当用户选中单选按钮 A 时，B 组文本框中的所有值都将清除，当用户检查时单选按钮 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('');
            });
        }
    });

});

任何帮助将不胜感激。

【问题讨论】：

你能在 jsfiddle.net 上创建你的代码的工作版本吗？我会采取的一种方法是将文本框的先前值存储在隐藏字段中。
嗨，我很抱歉，因为我不知道如何在 jsfiddle.net 上执行此操作。感谢您的快速回复。
你用的是什么版本的jQuery？
jQuery 版本 1.10.2

标签： copy radio-button checked

【解决方案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);
  });
}

【讨论】：