使用Jquery单击页面内的元素时如何删除选定的单选按钮

Question

好吧，我被困在这里了。

这是我正在处理的页面：https://www.passovermeal.org/

我有两个带有文本输入字段的单选按钮。

如果选择了第二个单选按钮，我想从第一个文本字段中删除值。

现在，如果我单击页面上的某个区域（例如 ID 为 #products 的 div），我想删除第二个单选按钮的选中状态，并将选中状态放回第一个单选按钮并删除金额输入到第二个文本区域。

这是一组单选按钮：

<div id="hiddenOtherAmountArea">
                        <input type="radio" value="9705" id="level_other" name="level_id" style="display:inline; margin-top:5px;" checked="checked" />
                        <!-- TODO: update value -->
                        <input type="text" id="other_amount" size="10" name="other_amount" value="" class="checked" />
                    </div>
                    <div id="otherAmountArea">
                        <input type="radio" value="9721" id="level_other" name="level_id" style="display:inline; margin-top:5px;" />Or enter another amount&nbsp;&nbsp;
                        <!-- TODO: update value -->
                        <input type="text" id="other_amount" size="15" name="other_amount" value="" class="otherChecked" />
                    </div>

Answer 1

首先要做的事情。您正在重复使用 ID。这些必须是唯一的，才能正常工作。实际上，您有两个名为 other_amount 的元素和两个名为 level_other 的元素。这是一个禁忌。

编辑：正如您所说，您需要重复使用的 ID。我将类添加到要引用的元素（具有相同名称）中。不确定重复 ID 会产生什么影响（如果有的话）。否则这样的事情应该可以工作（如果我理解你的问题的话）。

<div id="hiddenOtherAmountArea">
     <input type="radio" value="9705" id="level_other" class="level_other" name="level_id" style="display:inline; margin-top:5px;" checked="checked" />
     <!-- TODO: update value -->
     <input type="text" id="other_amount" class="other_amount" size="10" name="other_amount" value="" class="checked" />
</div>
<div id="otherAmountArea">
     <input type="radio" value="9721" id="level_other" class="level_other" name="level_id" style="display:inline; margin-top:5px;" />Or enter another amount&nbsp;&nbsp;
     <!-- TODO: update value -->
     <input type="text" id="other_amount" class="other_amount" size="15" name="other_amount" value="" class="otherChecked" />
</div>

你应该可以做这样的事情：

$('#hiddenOtherAmountArea .level_other').change(function() {
    $('#otherAmountArea .other_amount').val('');
});

$('#otherAmountArea .level_other').change(function() {
    $('#hiddenOtherAmountArea .other_amount').val('');
});

$('#products').click(function() {
    $('#hiddenOtherAmountArea .level_other').attr('checked','checked');
    $('#otherAmountArea .other_amount').val('');
})