在Javascript中选中复选框时显示消息_Javascript_Jquery_Html_Checkbox

在Javascript中选中复选框时显示消息

javascript jquery html checkbox

在Javascript中选中复选框时显示消息,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我知道这应该很简单，但我找不到一个方法去做，我有一种简单的感觉，但我被卡住了。我试图在每次选中复选框时显示一条消息。我有下面的代码，但我只能显示第一个复选框的消息。我只是从Javascript开始函数myFunction（）{ var checkBox=document.getElementById（“myCheck”）； var text=document.getElementById（“text”）；如果（checkBox.checked==true）{ text.style.disp

我知道这应该很简单，但我找不到一个方法去做，我有一种简单的感觉，但我被卡住了。我试图在每次选中复选框时显示一条消息。我有下面的代码，但我只能显示第一个复选框的消息。我只是从Javascript开始

函数myFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“text”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}


选中复选框时显示一些文本：
复选框：
已选中复选框
复选框2：
选中第二个复选框
复选框3：
选中第三个复选框

您有多个具有相同ID的元素。请尝试更改两个ID，使其结尾有一个数字（myCheck 1或myCheck 2），或将其完全更改为其他数字。以下是我的建议：

函数myFunction（idCheck，idText）{
var checkBox=document.getElementById（idCheck）；
var text=document.getElementById（idText）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}


选中复选框时显示一些文本：
复选框：
已选中复选框
复选框2：
选中第二个复选框
复选框3：
选中第三个复选框

首先，您需要具有uniq id的输入类型复选框

<input type="checkbox" id="uniq_id" />

id必须是唯一的。使用

this.id

函数myFunction（id）{
var checkBox=document.getElementById（id）；
var text=document.getElementById（“text”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}

选中复选框时显示一些文本：

复选框：已选中复选框

复选框2：选中第二个复选框

复选框3：

第三个复选框被选中

因为id是唯一的标识符，所以您的函数总是选择第一个复选框

document.getElementById("myCheck");

您需要将其修改为smth。像这样

<!DOCTYPE html>
<html>
<body>

    <p>Display some text when the checkbox is checked:</p>
    Checkbox:
    <input type="checkbox" id="check_1" onclick="myFunction(event)">
    <p id="text_check_1" style="display:none">Checkbox is CHECKED!</p>

    Checkbox2:
    <input type="checkbox" id="check_2" onclick="myFunction(event)">
    <p id="text_check_2" style="display:none">Second checkbox is checked</p>

    Checkbox3:
    <input type="checkbox" id="check_3" onclick="myFunction(event)">
    <p id="text_check_3" style="display:none">Third checkbox is checked</p>

    <script>
        function myFunction(event) {
            var checkBox = event.target,
                id = checkBox.id,
                text = document.getElementById("text_" + id);
            if (checkBox.checked == true) {
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }
    </script>
</body>
</html>


选中复选框时显示一些文本：
复选框：
选中复选框
复选框2：
选中第二个复选框
复选框3：
选中第三个复选框
函数myFunction（事件）{
var checkBox=event.target，
id=checkBox.id，
text=document.getElementById（“text_u3;”+id）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}

id

必须是唯一的，您可以将

复选框和p
的id
作为参数传递，以实现如下功能

函数myFunction（id，pid）{
var checkBox=document.getElementById（id）；
var text=document.getElementById（pid）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}

选中复选框时显示一些文本：
复选框：
已选中复选框
复选框2：
选中第二个复选框
复选框3：
选中第三个复选框
实际上，您必须使用不同的ID，而且不需要几个p
元素，最后，为了避免不必要的查询，您可以将单击的元素传递给函数，因为您是通过onclick
attr调用它的

函数myFunction（elem）{
var=elem；
var p=document.getElementsByTagName（'p'）[1]；
如果（checkBox.checked==true）{
p、 innerHTML=“Checkbox”+Checkbox.id+”已选中
p、 style.display=“block”；
}否则{
p、 style.display=“无”；
}
}

选中复选框时显示一些文本：
复选框：

复选框2：
复选框3：
您根本不需要javascript或jquery—这可以通过单独使用CSS来实现—使用直接同级选择器和：checked伪选择器，您可以在下一页上设置display或visibility属性
您确实有多个id，因此需要更正-但在选中复选框后切换下一个p只需CSS即可
document.getElementById("myCheck");


p{display:none}
输入[type=“checkbox”]：选中+p{display:block}
选中复选框时显示一些文本：
复选框：
第一个复选框被选中
复选框2：
选中第二个复选框
复选框3：
第三个复选框被选中

不会继续说明复选框的重要性以及它如何阻碍复选框的预期行为。有两个演示：

演示1使用JavaScript，这对于一个简单的任务来说是过火了

对于事件处理，请尽量避免使用：

请尝试，按照链接了解详细信息

在演示1中使用，因此只有添加的

元素用作eventListener，而不是多个复选框

引用表单控件的另一种方式（例如，

输入

，

文本区域

等）

 var chxs = document.querySelectorAll('[type=checkbox]');
 for (let i = 0; i < chxs.length; i++) {
    chxs[i].addEventListener('change', message);
 }

 var form = document.forms.formID;

 form.addEventListener('change', message);