reactjs 如何在“选择选项”中添加复选框?

ia2d9nvy  于 2023-06-22  发布在  React
关注(0)|答案(3)|浏览(94)

我想创建一个复选框内的选择选项,它只显示复选框中的Select All Sites选项。我该如何实施?
我正在使用react-select库进行下拉。
当前行为:

我的代码:
https://codesandbox.io/s/proud-water-cvjhgc?file=/src/index.js
预期输出:

谁能帮帮我。谢谢

lokaqttq

lokaqttq1#

你可以使用https://www.npmjs.com/package/multi-select-checkbox这个库来代替react-select,它有更多的定制

v440hwme

v440hwme2#

下面是我评论中的一个例子
基本上。你不能在另一个可点击元素中添加一个可点击元素。浏览器如何理解哪一个元素应该捕捉到点击,一个特定的元素还是全部元素?您可以使用JavaScript将select属性添加到所有选项中,并在select上使用属性multiple来允许这样做
以及一种可能的方法

const all = document.querySelectorAll("select option:not(:first-of-type");
let selectAll = document.querySelector("select option:first-of-type");

selectAll.addEventListener("click", function () {
  this.style.color="red";
  this.style.background="yellow";
    for (let i = 0; i < all.length; i++) {
      all[i].setAttribute("selected", "selected");
    }
});
select{height:14em}
<select multiple name="select">
  <option>Select All</option>
  <option value="a">Value A</option>
  <option value="b">Value B</option>
  <option value="c">Value C</option>
  <option value="d">Value D</option>
  <option value="e">Value E</option>
  <option value="f">Value F</option>
  <option value="g">Value G</option>
  <option value="h">Value H</option>
</select>
7cjasjjr

7cjasjjr3#

你好,我可能有一个解决这个问题的办法,如果你做一个

<form action="" method="POST">
    <div style="display: flex; flex-direction: column; max-height: 5em; overflow: auto;">
        <div>
            <input type="checkbox" name="test[]" id="test_1" value="test_1">
            <label for="test_1">Test</label>
        </div>
    </div>
<p>Scroll down for more options</p>
    <form action="" method="POST">
        <div style="display: flex; flex-direction: column; max-height: 5em; overflow: auto; border: 1px solid black">
            <div>
                <input type="checkbox" name="test[]" id="test_1" value="test_1">
                <label for="test_1">Test 1</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_2" value="test_1">
                <label for="test_1">Test 2</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_3" value="test_1">
                <label for="test_1">Test 3</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_4" value="test_1">
                <label for="test_1">Test 4</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_5" value="test_1">
                <label for="test_1">Test 5</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_6" value="test_1">
                <label for="test_1">Test 6</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_7" value="test_1">
                <label for="test_1">Test 7</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_8" value="test_1">
                <label for="test_1">Test 8</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_9" value="test_1">
                <label for="test_1">Test 9</label>
            </div>
        </div>
    </form>

如果你愿意的话,你可以在输入表单上设置一些bootstrap select样式,但是这个对我来说很好用

相关问题