如何在html和jQuery中隐藏和取消隐藏组合框？

Question

下面的代码隐藏和取消隐藏输入类型......，我需要隐藏和取消隐藏组合框(select)，我可以在那里改变什么？我试过了，但是没有效果

    <table>
    <?php
    for($count=0;$count<=2;$count++)
    {
     echo"<tr>
        <td>
          <input type=\"checkbox\" name=\"sd3\" value=\"mfi_nam9\" class=\"checkme\" />
        </td>
        <td>First Value</td>
        <td>
          <input type=\"number\" name=\"mfi_nam9\" class=\"text1 required\" id=\"mfi_name\" hidden>
        </td>
        <td>
    <td>
    <select name=\"ItemCode\" class=\"text\" hidden>
    <option value=\"001\">Item 1</option>
    <option value=\"002\">Item 2</option>
    </select>
    </td>
</td>
      </tr>";
    }
      ?>

    </table>



    <script>
    [].forEach.call(document.querySelectorAll('.checkme[type="checkbox"]'), function(elem) {
      elem.addEventListener('change', function() {
        this.parentNode.parentNode.querySelector('.text1[type="number"]').hidden = !this.checked;
      });
    })
    </script>


    <script>
    [].forEach.call(document.querySelectorAll('.checkme[type="checkbox"]'), function(elem) {
      elem.addEventListener('change', function() {
        this.parentNode.parentNode.querySelector('.text[type="select"]').hidden = !this.checked;
      });
    })
    </script>

我甚至试图改变类型["选择"]，但它不工作，请任何人可以帮助我。

Answer 1

该选择器不正确。.text[type="select"]，应改为: select.text .

请注意，你的HTML中存在一些错误：同样的 id 不能多次使用，而且还有一个额外的 td 标签(<td><td> 而不是 <td>)。

你的Javascript也可以简化。

<table>
    <tr>
        <td><input type="checkbox" name="sd3" value="mfi_nam9" class="checkme" /></td>
        <td>First Value</td>
        <td><input type="number" name="mfi_nam9" class="text1 required" hidden></td>
        <td>
            <select name="ItemCode" class="text" hidden>
                <option value="001">Item 1</option>
                <option value="002">Item 2</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="sd3" value="mfi_nam9" class="checkme" /></td>
        <td>First Value</td>
        <td><input type="number" name="mfi_nam9" class="text1 required" hidden></td>
        <td>
            <select name="ItemCode" class="text" hidden>
                <option value="001">Item 1</option>
                <option value="002">Item 2</option>
            </select>
        </td>
    </tr>
</table>



<script>
    document.querySelectorAll('.checkme[type="checkbox"]').forEach(function (elem) {
        elem.addEventListener('change', function () {
            this.parentNode.parentNode.querySelector('.text1[type="number"]').hidden = !this.checked;
            this.parentNode.parentNode.querySelector('select.text').hidden = !this.checked;
        });
    });
</script>