带有 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”和“其他”一样隐藏以前选择的输出。

请告知我为此目的我必须在此脚本中进行哪些更改。谢谢

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>