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

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

当用户单击“我想要”复选框时，相应的选项将自动选中

示例：

当用户单击“输入”且值=可用时，则选择值=1的“选项”

当用户单击值为可用空格的“输入”时，将选择值为3的“选项”

表格如下：

有船吗 可用空间 客满 无法使用的 短途旅行 行程取消 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消

---

由于您使用的复选框可以同时选中多个复选框，因此您需要一个允许多个拾取的选择，因此我添加了属性multiple：

让options=Array.fromcategory.querySelectorAll'option'； document.forms[0]。addEventListener'change'，e=>{ options.findo=>o.textContent==e.target.value.selected=e.target.checked； } 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消

---

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

演示 细节在演示中进行了注释

//参考 var form=document.forms.main； /* 将更改事件注册到表单 何时更改呼叫同步 */ form.onchange=sync； //同步传递事件对象 函数同步事件{ //引用下面的所有表单标记 var ui=this.elements； //参照已更改的单选按钮 var tgt=event.target； //找到单选按钮id并提取数字-1 var idx=tgt.id.split.pop-1； //参考 var cat=ui.category； //在idx位置处的参考 var opt=类别选项[idx]； //选择那个 opt.selected=true； } 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消

---

只需对HTML进行最小的更改即可使其有效，您可以执行以下操作：

基于下拉菜单进行初始化 document.getElementByIdmain .addEventListenerchange，e=>{ 如果e.target.name==title document.getElementByIdcategory.value=e.target.value； }; //基于下拉菜单进行初始化 document.querySelector[name=title][value='+document.getElementByIdcategory.value+']； 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消 有船吗 可用空间 客满 无法使用的 短途旅行 行程取消

---

如果有多个复选框怎么办？1。你想要一台收音机2。选项没有ID 3。设置值用户只能选择一个复选框而不能选择多个复选框，是否可以修改为这样？将复选框更改为收音机并删除“多个”使您的代码正常工作谢谢..@Weyboat老实说，这是您的错，不是我的错。首先，我的回答是正确的，您的说明不清楚，并且您的方法具有误导性。请在下一个问题上花更多的精力。你的回答是正确的。当然，这是我的错，你的代码帮助我发现了错误。谢谢..目前它对我不起作用，我会仔细检查我的代码和你的代码，然后再报告..@Weyboat我把标签包在了所有东西上，这可能就是原因。是否存在与复选框/收音机不在同一位置的特殊原因？是的，选择框用于选择元素的数组中。我刚刚尝试将结束标记移动到选择框的下方，但由于它是数组的一部分，因此它被定位在多个选择框的下方。FF在这个站点上使用演示是否有效？它适合我。是的，我有一个新文件和工作代码，我只需要翻译成我现有的代码。。我可能需要一段时间，但谢谢你迄今为止的帮助！