javascript - 清除输入字段

Question

我有一些 JavaScript，我想在单击任一单选按钮时清除所有输入字段。 (单选按钮用于指示输入的保单编号类型)。我创建了一个名为 Clear() 的函数来清除所有输入，并在 if 语句中调用该函数来查看单击了哪个单选按钮。由于单击哪一个并不重要，因为单击两者中的任何一个时所有输入字段都会被删除，因此该函数调用同时存在于两者中。

我在网上寻找了这个解决方案的帮助；然而，我所拥有的在 JavaScript 函数的结构和调用方面似乎是正确的。我的代码如下:

if ($('#EstimatePolicyNumber').val()) {
        $('#EstimateRadio').prop('checked', true);
        $('#estimate').show();
        $('#exisiting').hide();
        Clear();
}
else if ($('#ExisitingPolicyNumber').val()){
        $('#ExisitingRadio').prop('checked', true);
        $('#existing').show();
        $('#estimate').hide();
        Clear();
}

//Used to clear all of the input fields
function Clear() {
        $('#ExisitingPolicyNumber').val('');
        $('#EstimatePolicyNumber').val('');
        $('#NewPolicyNumber').val('');
        $('#EffectiveDate').val('');
        $('#ServicingAgent').val('');
        $('#CheckBox').prop('checked', false);
}

这是单选按钮的 html

<label class="float-left" id="radio-1">
        @Html.RadioButtonFor(model => model.RCTRadioType, "EstimateRadio", new { @id = "EstimateRadio", @name = "radio", @style = "margin:5px;" })
        Estimate  Number
</label>

<div class="clear-fix"></div>

  <label class="float-left"  id="radio-2">
        @Html.RadioButtonFor(model => model.RCTRadioType, "ExisitingRadio", new { @id = "ExisitingRadio", @name = "radio", @style = "margin:5px;" })
          Farm Family Policy Number
   </label>

对我做错了什么有什么想法吗？

Answer 1

目前还不清楚你想要实现什么以及什么不起作用。

如果我明白你想要做什么，最简单的方法是将点击功能绑定(bind)到你想要管理的每个 radio 。通过这种方式，可以更轻松地在 radio 上设置不同的 id，从而获得更好的可读性。

例如，让我们采用以下单选按钮:

<form>
    <input type="radio" id="radio1" name="radioButton" value="1">Option 1</input>
    <input type="radio" id="radio2" name="radioButton" value="2">Option 2</input>
    <input type="text" value="Click Option 2 to clear me" id="textField"/>
</form>

您可以将不同的 click() 函数绑定(bind)到每个 radio ，如下所示:

$("#radio1").click(function(){
    $('#estimate').show();
    $('#exisiting').hide();
    Clear();
});

$("#radio2").click(function(){
    $('#estimate').hide();
    $('#exisiting').show();
    Clear();
});

这样您就不必检查任何 val()。

DEMO