单击复选框以自动选择相应的选项答案

【问题标题】：Click a checkbox to auto-select a corresponding option单击复选框以自动选择相应的选项
【发布时间】：2019-08-07 20:55:46
【问题描述】：

我有以下表单，其中包含各种复选框输入和一个带有各种选项的选择框。

当用户点击一个复选框时，我希望自动选择相应的选项。

例子：

当用户单击 value="Boat Available" 的“输入”时，会选择带有 value="1" 的“选项”。

当用户单击 value="Spaces Available" 的“输入”时，将选择 value="3" 的“选项”。

这是表格：

<form>
  <input name="title" type="checkbox" class="formElements" id="title1" value="Boat Available">Boat Available
  <input name="title" type="checkbox" class="formElements" id="title2" value="Spaces Available">Spaces Available
  <input name="title" type="checkbox" class="formElements" id="title3" value="Fully Booked">Fully Booked
  <input name="title" type="checkbox" class="formElements" id="title4" value="Not Available">Not Available
  <input name="title" type="checkbox" class="formElements" id="title5" value="Short Trip">Short Trip
  <input name="title" type="checkbox" class="formElements" id="title6" value="Trip Cancelled">Trip Cancelled
</form>


<select name="epcCat[1]" class="formElements" id="category">
  <option id="101" value="1">Boat Available</option>
  <option id="103" value="3">Spaces Available</option>
  <option id="104" value="4">Fully Booked</option>
  <option id="105" value="5">Not Available</option>
  <option id="10204" value="204">Short Trips</option>
  <option id="10180" value="180">Trip Cancelled</option>
</select>

【问题讨论】：

如果有多个复选框怎么办？
1.你想要一个收音机 2. 选项没有 ID 3. 设置值

标签： javascript html select checkbox

【解决方案1】：

只需对 HTML 进行少量更改（实际上只是为了使其有效），您就可以这样做：

根据下拉菜单初始化

document.getElementById("main")
  .addEventListener("change", (e) => {
    if (e.target.name == "title") document.getElementById("category").value = e.target.value;
  });
// Initialise based on dropdown
document.querySelector("[name=title][value='"+document.getElementById("category").value+"']").click();

<form id='main'>
  <input name="title" type="radio" class="formElements" id="title1" value="1">Boat Available
  <input name="title" type="radio" class="formElements" id="title2" value="3">Spaces Available
  <input name="title" checked type="radio" class="formElements" id="title3" value="4">Fully Booked
  <input name="title" type="radio" class="formElements" id="title4" value="5">Not Available
  <input name="title" type="radio" class="formElements" id="title5" value="204">Short Trip
  <input name="title" type="radio" class="formElements" id="title6" value="180">Trip Cancelled<br>

  <select name="epcCat[1]" class="formElements" id="category">
    <option value="1">Boat Available</option>
    <option value="3">Spaces Available</option>
    <option value="4">Fully Booked</option>
    <option value="5">Not Available</option>
    <option value="204">Short Trips</option>
    <option value="180">Trip Cancelled</option>
  </select>

</form>

基于无线电初始化

document.querySelectorAll("#main [name=title]").forEach(function(chk) {
  chk.addEventListener("click", function() {
    document.getElementById("category").value = this.value;
  })
});

// initialise based on radio

document.querySelector("[name=title]:checked").click();

<form id='main'>
  <input name="title" type="radio" class="formElements" id="title1" value="1">Boat Available
  <input name="title" type="radio" class="formElements" id="title2" value="3">Spaces Available
  <input name="title" checked type="radio" class="formElements" id="title3" value="4">Fully Booked
  <input name="title" type="radio" class="formElements" id="title4" value="5">Not Available
  <input name="title" type="radio" class="formElements" id="title5" value="204">Short Trip
  <input name="title" type="radio" class="formElements" id="title6" value="180">Trip Cancelled<br>

  <select name="epcCat[1]" class="formElements" id="category">
    <option value="1">Boat Available</option>
    <option value="3">Spaces Available</option>
    <option value="4">Fully Booked</option>
    <option value="5">Not Available</option>
    <option value="204">Short Trips</option>
    <option value="180">Trip Cancelled</option>
  </select>

</form>

【讨论】：

【解决方案2】：

我假设您有兴趣一次选择一个选项（否则没有任何意义）。将所有复选框更改为单选按钮，因为您一次只需要选择一个类别。 <form> 也包裹着一切。

演示

详情在demo中注释

// Reference the <form>
var form = document.forms.main;
/*
Register the change event to form 
When <form> is changed call sync()
*/
form.onchange = sync;

// sync() passes Event Object
function sync(event) {
  // Reference all form tags under <form>
  var ui = this.elements;
  // Reference the changed radio button
  var tgt = event.target;
  // Find the radio button id and extract the number -1
  var idx = (tgt.id.split('').pop()) - 1;
  // Reference the <select>
  var cat = ui.category;
  // Reference the <option> at the position of idx
  var opt = cat.options[idx];
  // Select that <option>
  opt.selected = true;
}

<form id='main'>
  <input name="title" type="radio" class="formElements" id="title1" value="Boat Available">Boat Available
  <input name="title" type="radio" class="formElements" id="title2" value="Spaces Available">Spaces Available
  <input name="title" type="radio" class="formElements" id="title3" value="Fully Booked">Fully Booked
  <input name="title" type="radio" class="formElements" id="title4" value="Not Available">Not Available
  <input name="title" type="radio" class="formElements" id="title5" value="Short Trip">Short Trip
  <input name="title" type="radio" class="formElements" id="title6" value="Trip Cancelled">Trip Cancelled<br>

  <select name="epcCat[1]" class="formElements" id="category">
    <option id="101" value="1">Boat Available</option>
    <option id="103" value="3">Spaces Available</option>
    <option id="104" value="4">Fully Booked</option>
    <option id="105" value="5">Not Available</option>
    <option id="10204" value="204">Short Trips</option>
    <option id="10180" value="180">Trip Cancelled</option>
  </select>

</form>

【讨论】：

目前它对我不起作用，我会非常仔细地检查我的代码与你的代码并报告回来..
@Weyboat 我将<form> 标签包裹在所有东西上，这可能就是原因。 <select> 与复选框/收音机所在的 <form> 不同，有什么特别的原因吗？
是的，选择框用于选择元素数组。我只是尝试将结束标记移动到选择框下方，但由于它是数组的一部分，因此它位于多个选择框下方..
FF 是否可以使用此站点上的演示？它对我有用。
是的，我有一个包含工作代码的新文件，我只需要翻译成我现有的代码。我可能需要一段时间，但感谢到目前为止的帮助！

【解决方案3】：

由于您使用的是复选框（可以并行检查多个复选框），因此您需要一个允许多个选择的select，因此我添加了属性multiple：

let options = Array.from(category.querySelectorAll('option'));

document.forms[0].addEventListener('change', (e) => {
  options.find(o=>o.textContent===e.target.value).selected = e.target.checked;
})

<form>
  <input name="title" type="checkbox" class="formElements" id="title1" value="Boat Available">Boat Available
  <input name="title" type="checkbox" class="formElements" id="title2" value="Spaces Available">Spaces Available
  <input name="title" type="checkbox" class="formElements" id="title3" value="Fully Booked">Fully Booked
  <input name="title" type="checkbox" class="formElements" id="title4" value="Not Available">Not Available
  <input name="title" type="checkbox" class="formElements" id="title5" value="Short Trip">Short Trip
  <input name="title" type="checkbox" class="formElements" id="title6" value="Trip Cancelled">Trip Cancelled
</form>

<select name="epcCat[1]" class="formElements" id="category" multiple>
  <option id="101" value="1">Boat Available</option>
  <option id="103" value="3">Spaces Available</option>
  <option id="104" value="4">Fully Booked</option>
  <option id="105" value="5">Not Available</option>
  <option id="10204" value="204">Short Trip</option>
  <option id="10180" value="180">Trip Cancelled</option>
</select>

【讨论】：

用户应该只能选择一个复选框而不是多个复选框，可以修改为这样吗？
将复选框更改为收音机并删除“多个”让您的代码正常工作，谢谢..
@Weyboat 老实说，那是你的错，不是我的。首先，我的回答是正确的，您对此的规范不清楚，并且您的方法具有误导性。请在下一个问题上花更多的精力。
你当然是对的，这是我的错，你的代码帮助我发现了我的错误。谢谢你..