Select 文本输入单选按钮

Question

当访问者在另一个输入表单中输入文本时，是否可以选择让单选按钮自动 selected？我已经搜索过了，但是没有成功。

我有这个带有 3 个单选按钮的表单，它们允许用户选择尺寸，最后一个单选按钮用于自定义尺寸（宽度和高度）。在最后一个单选按钮下有文本输入来输入自定义高度和宽度。

<form action="#" method="post">
   <label for="original-size">Original
       <input type="radio" id="original_size" name="size" value="original" checked="checked">
   </label>
   <label for="medium-size">Medium
        <input type="radio" id="medium-size" name="size" value="medium">
    </label>                   

   <label for="custom-size">Custom
         <input type="radio" id="custom-size" name="size" value="custom">
   </label>

        <input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
         <label for="custom-width">custom width</label>
           and 
          <input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
          <label for="custom-height">custom height</label>
          <br>
          <button name="submit" type="submit">Submit</button>
          </form>

如果用户单击自定义宽度或自定义高度的文本输入，如何select 自定义单选输入的大小？有没有没有java脚本的选项，如果没有，java脚本的小代码就可以了（我没有使用jQuery）？

Answer 1

设法挖到了这个，这是你要找的吗？

<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>

<div id="customWrapper">
  <p>Custom: <input type="radio" id="customSize"></p>
  <p>Custom Width: <input type="text"></p> 
  <p>Custom Height: <input type="text"> </p> 
</div>
</form>

const div = document.getElementById('customWrapper');

// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
  document.getElementById('customSize').checked = true;   
}, true);

// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
  document.getElementById('customSize').checked = false;    
}, true);

https://jsfiddle.net/mLvt9ubz/

它基本上搜索 div 内的任何输入，当它的事件发生变化时，就会发生一些事情。在这种情况下，带有 ID 的单选按钮是选中的属性。

Select 文本输入单选按钮

Select radio button on text input

html

javascript

forms

radio-button