Question

我有jQuery和表格如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

在此表中，我有3个单选按钮：

简单单选按钮
带输入框的单选按钮
带搜索框的单选按钮

喜欢前2个单选按钮第3个搜索框＆＃39;按钮不起作用。例如，当我点击单选按钮＆＃39; a＆＃39;时，它会显示＆＃34;您输入A＆＃34;然后我点击单选按钮＆＃39;其他＆＃39;并输入一些文本，结果它隐藏了我最后选择的按钮显示，并显示我输入的任何内容。如果我选择＆＃39;搜索＆＃39;单选按钮它隐藏了最后选择的按钮显示，并显示我输入的任何内容。

但是

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

所以，我的问题是，当我选择任何一个单选按钮时，它应该隐藏先前选择的输出，如单选按钮＆＃39; A＆＃39;和其他＆＃39;做。

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

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>

带有HTML表格搜索框的单选按钮

1 个答案: