选中复选框时显示多个项目

Question

I'm trying to set up multiple items to show when a checkbox is selected.我正在尝试设置多个项目以在选中复选框时显示。 If you choose Function 1 for example I want all the steps related to function 1 to appear.例如，如果您选择 Function 1 ，我希望出现与 function 1 相关的所有步骤。

<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Function 1: <input type="checkbox" id="function1"  onclick="myFunction(this.id, 'function1_steps')">
Function 2: <input type="checkbox" id="function2"  onclick="myFunction()">

<p id="function1_1" class="function1_steps" style="display:none">Function1 Step 1:</p>
<p id="function1_2" class="function1_steps" style="display:none">Function1 Step 2:</p>


</body>
</html>

function myFunction(id, pid) {
  var checkBox = document.getElementById(id);
  var text = document.getElementsByClass(pid);
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

Answer 1

You can use the id attribute.您可以使用id属性。

 function myFunction(id) { var checkBox = document.getElementById(id); var text = document.getElementById(id+"_text"); if (checkBox.checked == true) { text.style.display = "block"; } else { text.style.display = "none"; } }

 <p>Display some text when the checkbox is checked:</p> Function 1: <input type="checkbox" id="function1" onclick="myFunction(this.id)"> Function 2: <input type="checkbox" id="function2" onclick="myFunction(this.id)"> <p id="function1_text" class="function1_steps" style="display:none">Function1 Step 1:</p> <p id="function2_text" class="function1_steps" style="display:none">Function2 Step 2:</p>

Answer 2

Try something like this (first checkbox shows the 2 step, second one none, so you can see multiple by class)尝试这样的事情（第一个复选框显示 2 步骤，第二个没有，所以你可以按类查看多个）

 $('#function1').click(function() { $(".function1_steps").toggle(this.checked); }); $('#function2').click(function() { //... });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <p>Display some text when the checkbox is checked:</p> Function 1: <input type="checkbox" id="function1"> Function 2: <input type="checkbox" id="function2"> <p id="function1_1" class="function1_steps" style="display:none">Function1 Step 1:</p> <p id="function1_2" class="function1_steps" style="display:none">Function1 Step 2:</p> </body> </html>

EDIT (to explain):编辑（解释）：
The syntax I used is pretty simple and it's the basic of JQuery.我使用的语法非常简单，它是 JQuery 的基础。

$('#function1').click(function() {
    $(".function1_steps").toggle(this.checked);
});

This just check if the input with id = 'function' is clicked, independently if it is a button, a checkbox, a radio button, etc. IDs are called like that one.这只是检查是否单击了 id = 'function' 的输入，独立于它是否是按钮、复选框、单选按钮等。ID 的调用方式与此类似。 With # calls for an ID, using.使用 # 调用 ID，使用。 calls for a class需要 class

$('#function1')        //Input with 'function1' as id
$('.function1')        //Input with 'function1' as class

This just calls the这只是调用

associated to the class 'function1_steps' and use the function toggle (basically it shows the div, or p, or whatever if it's hided, and it hides it if it's showing)与 class 'function1_steps' 关联并使用 function 切换（基本上它显示 div 或 p 或其他任何内容，如果它被隐藏，它会在显示时隐藏它）

$(".function1_steps").toggle(this.checked);

this.checked means that you're checking if the checkbox is checked or not and execute the toggle if it is checked (true) this.checked 表示您正在检查复选框是否被选中，如果选中则执行切换 (true)

Answer 3

I would use data-* attribute to set which step you're using, so as to not tie it to the ID (although it's a matter of your personal preference).我会使用data-* attribute来设置您正在使用的步骤，以免将其与 ID 绑定（尽管这取决于您的个人喜好）。

After that, get all the elements with classname function${step}_steps :之后，获取类function${step}_steps的所有元素：

 function myFunction(e) { const step = e.dataset.step; const steps = document.getElementsByClassName(`function${step}_steps`); for (let i = 0; i < steps.length; i++) { if (e.checked == true) { steps[i].style.display = "block"; } else { steps[i].style.display = "none"; } } }

 <html> <body> <p>Display some text when the checkbox is checked:</p> Function 1: <input type="checkbox" data-step='1' onclick="myFunction(this)"> Function 2: <input type="checkbox" data-step='2' onclick="myFunction(this)"> <p class="function1_steps" style="display:none" data-step='1'>Function1 Step 1:</p> <p class="function1_steps" style="display:none" data-step='1'>Function1 Step 2:</p> </body> </html>

NOTE: Sending this as an argument to the function will allow you to target the element itself, without having to do one more search for the right checkbox:)注意： this作为参数发送到 function 将允许您定位元素本身，而无需再次搜索正确的复选框：）

选中复选框时显示多个项目

问题描述

3 个解决方案

解决方案1
0 2019-10-02 07:04:51

解决方案2
0 已采纳 2019-10-02 07:06:43

解决方案3
0 2019-10-02 07:16:53

选中复选框时显示多个项目

问题描述

3 个解决方案

解决方案1 0 2019-10-02 07:04:51

解决方案2 0 已采纳 2019-10-02 07:06:43

解决方案3 0 2019-10-02 07:16:53

解决方案1
0 2019-10-02 07:04:51

解决方案2
0 已采纳 2019-10-02 07:06:43

解决方案3
0 2019-10-02 07:16:53