javascript - 单击相应复选框时显示/隐藏下拉菜单

Question

要求:在选中/取消选中第一个复选框时，我需要显示/隐藏第一个下拉列表，同样在选中/取消选中第二个复选框时，我需要显示/隐藏第二个下拉列表。

请注意，由于复选框的这些值来自数据库，并且我迭代它们以在前端显示。我只能为所有复选框使用通用的 showMe() 函数

问题:当未选中 checkbox1 或使用我编写的逻辑检查 checkbox2 时，我无法完成此工作。有人可以建议一种更好的简洁方法吗？

function showMe (box, box1) {
        
        var chboxs = document.getElementsByName("c1");
        var vis = "none";
        var checkedOne;
        for(var i=0;i<chboxs.length;i++) { 
            if(chboxs[i].checked){
              checkedOne = i;
              alert(checkedOne);
             vis = "block";
                break;
            }
        }
        document.getElementsByName(box)[checkedOne].style.display = vis;
    }

    <input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox1
    <input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox2
     <select name="catsndogs" style="display:none">
     <option>Select</option>
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>


    <select name="parrot" style="display:none">
    <option>Select1</option>
	<optgroup label="Bird">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
</select>

Answer 1

这是否符合您的要求？

function showMe (box, box1) {
  var chkboxes = document.getElementsByName('c1');
  var selects = document.getElementsByTagName('select')
  var bools = []
  for (var i = 0; i < chkboxes.length; i++) {
    if (chkboxes[i].checked) {
      selects[i].style.display = 'block';
    } else {
      selects[i].style.display = 'none';
    }
  }

  
}

<input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox1
    <input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox2
     <select name="catsndogs" style="display:none">
     <option>Select</option>
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>


    <select name="parrot" style="display:none">
    <option>Select1</option>
	<optgroup label="Bird">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
</select>