带有HTML表的搜索框的广播按钮

Question

我有jQuery和表：

console.clear();
function inputSelected(val) {
    $("#result").html(function() {
        var str = '';
        $(":checked").each(function() {
            str += $(this).val() + " ";
        });
        if (val == 1) {
            return $('#testSearch').val();
        }
        str += $('#testSearch').val();
        return str;
    });
}
$(document).ready(function() {
    $("input[type=radio]").click(inputSelected);
    $("td.other").click(function() {
        $(this).find('input[type=text]').focus();
    });
    $('#testSearch').on('input propertychange paste', function() {
        inputSelected(1);
    })
    $("td.other input[type=text]").keyup(function(e) {
        var value = $(this).val().trim();
        if (value.length <= 0) {
            value = 'Other';
        }
        $(this).parent().siblings("input[type=radio]").val(value);
        $(this).parent().siblings("label").html(value);
        inputSelected();
    })
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
  <tr>
    <td><input name="test" type="radio" value="You enter A" id="1" />A</td>
    <td class="other"><input name="test" type="radio" value=""  id="2"/>Other:
      <div class="text">
        <input type="text" id="other" value="">
      </div>
    </td>
    <td><input name="test" type="radio" value=""  id="3"/>Search<input id='testSearch' type="search" name="search" placeholder="Search...">
    </td>
  </tr>
</table>
<div id="result">
	</div>

在此表中，我有3个广播按钮：

1. 简单的广播按钮
2. 带有输入框的广播按钮
3. 带搜索框的广播按钮

像第一个2个无线电按钮一样，第3个"搜索框"按钮不起作用。例如，当我单击"单击" a" a'"时，它会显示"您输入"，然后单击"单击"单击"按钮'其他'并输入一些文本，结果它隐藏了我的最后一个选择的按钮显示，并向我展示我输入的任何内容。同样，如果我选择"搜索"单选按钮，它隐藏了最后一个选定的按钮显示并显示我输入的任何内容。

但是

在我单击任何其他2个广播按钮时输入要搜索的内容后，它没有隐藏我插入的文本。

因此，我的问题是，当我选择任何一个单选按钮时，它应该隐藏以前选定的输出，例如单选按钮" A"one_answers"其他"。

为了这样的目的，请建议我在此脚本中必须做些什么。谢谢

Answer 1

捕获。我还评论了您的一些代码。

function inputSelected(val) {
    $("#result").html(function() {
        if (val == 1) {
            return $('#testSearch').val();
        }
        var str = '';
        $(":checked").each(function() {
            str += $(this).val() + " ";
        });
        //str += $('#testSearch').val();
        return str;
    });
}
$(document).ready(function() {
    $("input[name=test]").click(inputSelected);
    $("td.other").click(function() {
        $(this).find('input[type=text]').focus();
    });
    $('#testSearch').on('input propertychange paste', function() {
        $("input[class=testSearch]").val($('input[id=testSearch]').val());
        if($("input[class=testSearch]").is(':checked')){
            inputSelected(1);
            }
    })
    $("td.other input[type=text]").keyup(function(e) {
        var value = $(this).val().trim();
        if (value.length <= 0) {
            value = 'Other';
        }
        $(this).parent().siblings("input[type=radio]").val(value);
        $(this).parent().siblings("label").html(value);
        inputSelected();
    })
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
  <tr>
    <td><input name="test" type="radio" value="You enter A" id="1"/>A</td>
    <td class="other"><input name="test" type="radio" value="" id="2"/>Other:
      <div class="text">
        <input type="text" id="other" value="">
      </div>
    </td>
    <td><input name="test" class="testSearch" type="radio" value=""  id="3"/>Search<input id='testSearch' type="search" name="search" placeholder="Search...">
    </td>
  </tr>
</table>
<div id="result"></div>