Question

我已尝试更改单选按钮状态，方法是将＆lt; select＆gt;到＆lt; label＆gt;，但它没有奏效。当我点击另一个＆lt; select＆gt;时，我需要更改选中的单选按钮。 jQuery或javascript可用于此任务。＆LT; HTML＆GT; ＆LT;身体GT; ＆lt; label for =＆＃34; 0＆＃34;＆gt; ＆lt; select id =＆＃34; sorted＆＃34;＆gt; ＆LT;选项大于0＆LT; /选项＆GT; ＆LT;选项→1＆LT; /选项＆GT; ＆LT;选项→2＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; /标签＆gt; ＆lt; input type =＆＃34; radio＆＃34;命名=＆＃34;两性＆＃34;值=＆＃34;男性＆＃34; ID =＃＆34; 0＆＃34;检查＆GT; ＆lt; label for =＆＃34; 1＆＃34;＆gt; ＆lt; select id =＆＃34; sorting1＆＃34;＆gt; ＆LT;选项大于0＆LT; /选项＆GT; ＆LT;选项→1＆LT; /选项＆GT; ＆LT;选项→2＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; /标签＆gt; ＆lt; input type =＆＃34; radio＆＃34;命名=＆＃34;两性＆＃34;值=＆＃34;女性＆＃34; ID =＆＃34; 1＆＃34;＆GT; ＆lt; label for =＆＃34; 2＆＃34;＆gt; ＆lt; select id =＆＃34; sorting2＆＃34;＆gt; ＆LT;选项大于0＆LT; /选项＆GT; ＆LT;选项→1＆LT; /选项＆GT; ＆LT;选项→2＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; /标签＆gt; ＆lt; input type =＆＃34; radio＆＃34;命名=＆＃34;两性＆＃34;值=＆＃34;其他＆＃34; ID =＆＃34; 2＆＃34;＆GT; ＆LT; /体＆GT; ＆LT; / HTML＆GT;

Answer 1

＆＃13;

const selects = document.querySelectorAll("select")
selects.forEach( (select) => select.addEventListener('click', (event) =>
  event
  .target
  .parentElement
  .nextElementSibling.checked = true
))

＆＃13;

<label for="0">
        <select id="sorting">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </label>
    <input type="radio" name="gender" value="male" id="0" checked> 


    <label for="1">
        <select id="sorting1">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </label>
    <input type="radio" name="gender" value="female" id="1">

    <label for="2">
        <select id="sorting2">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </label>
    <input type="radio" name="gender" value="other" id="2">

＆＃13;

Answer 2

使用JQuery你可以做到

 $("select").change(function () {
  $(this).next('input[type=radio]').attr('checked', 'checked');
 });

它的作用：如果更改了任何select元素，它会找到radio类型的下一个输入并进行检查。

注意：您需要从HTML中删除<label>。

 $("select").change(function () {
  $(this).next('input[type=radio]').attr('checked', 'checked');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sorting">
      <option>0</optiacon>
      <option>1</option>
      <option>2</option>
    </select>
    <input type="radio" name="gender" value="male" id="0"> 

    <select id="sorting1" name="gender">
      <option>0</option>
      <option>1</option>
      <option>2</option>
    </select>
    <input type="radio" name="gender" value="female" id="1">

    <select id="sorting2" name="gender">
      <option>0</option>
      <option>1</option>
      <option>2</option>
    </select>
    <input type="radio" name="gender" value="other" id="2">

单击另一个<select>时更改选中的单选按钮

2 个答案: