多个复选框启用显示文本，禁用使用javascript删除文本？答案

【问题标题】：multiple checkbox enabled display text, disabled remove text with javascript?多个复选框启用显示文本，禁用使用javascript删除文本？
【发布时间】：2021-11-11 13:11:35
【问题描述】：

这两个功能是否可以使用 javascript（onclick 复选框启用然后显示文本，onclick 禁用然后不显示文本）？

勾选复选框然后显示文本（可选可编辑）时。取消选中相同的复选框并删除文本时？
拥有一系列这样的复选框并按照复选框的列出顺序显示（或不显示）每一行文本？（例如，按复选框的顺序一次一行）

** 编辑 - 到目前为止的代码，不适用于其他选项...也可以编辑 1 个容器中的所有文本吗？ ***

<!DOCTYPE html>
<html>
<body>
<p>Text Maker:</p>
<input type="checkbox" id="box" onclick="myFunction()">
<label for="box">Option 1</label> 
<input type="checkbox" id="box" onclick="myFunction()">
<label for="box">Option 2</label> 
<input type="checkbox" id="box" onclick="myFunction()">
<label for="box">Option 3</label> 

<p id="text" style="display:none">Display Option 1 settings here.</p>
<p id="text" style="display:none">Display Option 2 settings here.</p>
<p id="text" style="display:none">Display Option 3 settings here.</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("box");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>
</body>

【问题讨论】：

要么你想放counter，要么从数据库中获取唯一的ID并放在box id之后，比如box1, box2, box4, box5, box9

标签： javascript html

【解决方案1】：

您可以在调用函数时使用 this 关键字来引用被单击的复选框，并传入段落 id 以获取该元素。

如果我理解正确，您可以将contenteditable="true" 添加到您的段落标签中以使其可编辑？

<p>Text Maker:</p>
<input type="checkbox" id="box1" onclick="myFunction(this,'textBox1')">
<label for="box1">Option 1</label> 
<input type="checkbox" id="box2" onclick="myFunction(this,'textBox2')">
<label for="box2">Option 2</label> 
<input type="checkbox" id="box3" onclick="myFunction(this,'textBox3')">
<label for="box3">Option 3</label> 

<p id="textBox1" style="display:none" contenteditable="true">Display Option 1 settings here.</p>
<p id="textBox2" style="display:none">Display Option 2 settings here.</p>
<p id="textBox3" style="display:none">Display Option 3 settings here.</p>

<script>
function myFunction(checkBoxElm,textBoxId) {
 
  let textBox = document.getElementById(textBoxId);
  if (checkBoxElm.checked){
    textBox.style.display = "block";
  } else {
     textBox.style.display = "none";
  }
}
</script>

【讨论】：

如果我们有数千个文本框，那么您手动为所有复选框提供textBoxId
我不确定用例。这肯定不会按比例缩放，但是如果它是针对表单上的几个项目，或者考虑到上下文的类似项目，那么它应该没问题。在做很多其他事情之前，我需要了解更多关于用法的信息。
@rolewest 你是对的。它不是用于数千个复选框/文本，而是可能多达几十个。看看如何使用复选框来管理数千人会很有趣，但这超出了这种情况的范围。感谢您的回复，效果很好:)

【解决方案2】：

当有多个具有相同身份类名称的输入时效果更好。所以你可以在输入中添加一个类名，然后使用每个函数来实现你想要做的事情。

以下输入具有相同的类名，现在您可以按如下方式使用每个函数：

$ = jQuery;
$('.box').each(function(){
            
    $(this).change(function() { // on change of any of the input either checked or unchecked

        if(this.checked){ // if the input is checked
             alert('checked'); // your css
        }else{ // if the input is unchecked
             alert('not checked'); // your css
        }

    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="box">
<label for="box">Option 1</label>
<input type="checkbox" class="box">
<label for="box">Option 2</label>
<input type="checkbox" class="box">

【讨论】：

OP 从未说过他们在使用 JQuery...