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

您必须将每个radiobutton绑定一个click事件，以使它们采取行动。只需替换下面代码的第一部分即可。

    $("input[type='radio']").change(function () {

    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();
    }
}

Answer 2

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

如果我理解您要做的事情，最简单的方法是将点击功能绑定到您想要管理的每个电台。通过这种方式，可以更轻松地在无线电上设置不同的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()功能绑定到每个无线电，如下所示：

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

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

这样您就不必检查任何val（）。

DEMO

清除输入字段

2 个答案: