Радиокнопка с окном поиска 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"> 
 
\t </div>

В этой таблице у меня есть 3 кнопки радио:

1. Simple Radio Button
2. Радиоприемник с полем ввода
3. Радио-кнопка с полем поиска

Как и первые 2 радиокнопки Кнопка «Искать в окне поиска» не работает. Например, когда я нажимаю радиокнопку «a», на дисплее появляется «Вы вводите A», затем щелкаете по кнопке «другое» и вводите текст, в результате он скрывает мой последний выбранный дисплей кнопки и показывает мне все, что я набираю. То же самое, если я выбираю переключатель «поиск», он скрывает последний выбранный дисплей кнопки и показывает мне все, что я набираю.

Но

После ввода что-то искать, когда я нажал на любую другую кнопку 2 радио, он не скрывает текст, который я ввожу для поиска.

Итак, проблема заключается в том, что когда я выбираю какой-либо один переключатель, он должен скрыть предыдущий выбранный вывод, например, радиокнопку «А» и «другое».

Просьба сообщить, какие изменения я должен внести в этом скрипте для этой цели. Thanks

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>