Question

function radioCheck() {
  document.getElementById("last").checked = "checked";
}

<label> 
<input type="radio" name="Ppub" value="" checked="checked">All Dates 
</label>

<br>

<label>
<input type="radio" id="last" name="Ppub" value=""> Last 
</label>

<select name="Ppub" id="selectRange" value="" onchange="radioCheck();">
  <option value="">Select</option>
  <option value="20181220-20190120">month</option>
  <option value="20180720-20190120">6 months</option>
  <option value="20180120-20190120">year</option>
</select>

我正在处理搜索表单，并且有一组单选按钮可以过滤搜索。对于单选按钮之一，我希望将其“链接”到下拉菜单。

当用户从菜单中选择一个项目时，我可以使单选按钮的状态为“选中”。但是，如果用户选中另一个单选按钮，则仍使用所选项目的值。

如何对单选按钮和下拉菜单进行分组？我尝试将它们放在相同的标签中，但无济于事。

Answer 1

您必须在单击单选按钮时重置下拉列表。我也找不到下拉列表名称的任何原因，因为它与单选按钮相同。

请注意，单选按钮的 value 属性更改。

var radio = document.querySelector('[value=all]');
radio.onclick = function(){
  document.getElementById("selectRange").selectedIndex = 0;
}

function radioCheck() {
  document.getElementById("last").checked = "checked";
}

<label> 
  <input type="radio" name="Ppub" value="all" checked="checked">All Dates 
</label>

<br>

<label>
  <input type="radio" id="last" name="Ppub" value="last"> Last 
</label>

<select id="selectRange" value="" onchange="radioCheck();">
  <option value="">Select</option>
  <option value="20181220-20190120">month</option>
  <option value="20180720-20190120">6 months</option>
  <option value="20180120-20190120">year</option>
</select>

以下内容可能会帮助您实现所需的目标（Plesae注意HTML中的更改，并在每组广播中选择div包装并选择）。

var radioAll = document.querySelectorAll('[type=radio]');
radioAll.forEach(function(r){
  r.onclick = function(){
    var ddAll = document.querySelectorAll('select');
    ddAll.forEach(function(s){
      s.selectedIndex = 0;
    }); 
  }
});


function radioCheck(el) {
  var input = el.parentNode.querySelector('[name=Ppub]');
  input.checked = "checked";
}

<label> 
  <input type="radio" name="Ppub" value="all" checked="checked">All Dates 
</label>

<br>
<div>
  <label>
    <input type="radio" id="last" name="Ppub" value="last"> Last 
  </label>

  <select id="selectRange" value="" onchange="radioCheck(this);">
    <option value="">Select</option>
    <option value="20181220-20190120">month</option>
    <option value="20180720-20190120">6 months</option>
    <option value="20180120-20190120">year</option>
  </select>

</div>
<div>
  <label>
    <input type="radio" name="Ppub" value=""> Cutom range 
  </label>

  <select value="" onchange="radioCheck(this);">
    <option value="">Select</option>
    <option value="20181220-20190120">Test1</option>
    <option value="20180720-20190120">Test2</option>
    <option value="20180120-20190120">Test3</option>
  </select>
</div>

如何在逻辑上将单选按钮与下拉列表分组

1 个答案: