单选按钮选中和取消选中删除和替换输入值
radio buttons check and uncheck remove and replace input values
我有两个带有标签名称 A 和 B 的单选按钮和两组带有 class 名称 groupA 和 groupB.My 的文本框文本框将清除,当用户选中 Radiobutton B,然后 GroupB 文本框再次填充其原始值,而 Group A 文本框值将清除,反之亦然。为此,我能够根据 class.But 清除文本框值 我如何在用户选中其中一个单选按钮时填充所有先前的值?下面是我的代码。
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('');
});
}
});
});
如有任何帮助,我们将不胜感激。
您没有显示您的 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);
});
}
我有两个带有标签名称 A 和 B 的单选按钮和两组带有 class 名称 groupA 和 groupB.My 的文本框文本框将清除,当用户选中 Radiobutton B,然后 GroupB 文本框再次填充其原始值,而 Group A 文本框值将清除,反之亦然。为此,我能够根据 class.But 清除文本框值 我如何在用户选中其中一个单选按钮时填充所有先前的值?下面是我的代码。
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('');
});
}
});
});
如有任何帮助,我们将不胜感激。
您没有显示您的 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);
});
}