在Javascript中选中复选框时显示消息
在Javascript中选中复选框时显示消息
提问于 2018-03-16 11:24:05
我知道这应该很简单，但我找不到一种方法去做，我有一种感觉很简单，但我被卡住了。每次选中复选框时，我都会尝试显示一条消息。我有下面的代码，但我只能显示第一个复选框的消息。我刚刚开始使用Javascript。
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}<!DOCTYPE html>
<html>
<body>
<p>Display some text when the checkbox is checked:</p>
Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
Checkbox2: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Second checkbox is checked</p>
Checkbox3: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Third checkbox is checked</p>
</body>
</html>
回答 8
Stack Overflow用户
发布于 2018-03-16 11:53:47
id必须唯一，可以将checkbox和p的id作为参数传入函数，如下所示
function myFunction(id,pid) {
var checkBox = document.getElementById(id);
var text = document.getElementById(pid);
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}<!DOCTYPE html>
<html>
<body>
<p>Display some text when the checkbox is checked:</p>
Checkbox: <input type="checkbox" id="myCheck1" onclick="myFunction(this.id,'text1')">
<p id="text1" style="display:none">Checkbox is CHECKED!</p>
Checkbox2: <input type="checkbox" id="myCheck2" onclick="myFunction(this.id,'text2')">
<p id="text2" style="display:none">Second checkbox is checked</p>
Checkbox3: <input type="checkbox" id="myCheck3" onclick="myFunction(this.id,'text3')">
<p id="text3" style="display:none">Third checkbox is checked</p>
</body>
</html>
Stack Overflow用户
发布于 2018-03-16 15:08:49
不再继续讨论why #IDs need to be unique的重要性，以及它是如何阻碍复选框的预期行为的。有两个demo：
IMO 1使用JavaScript，这是对于简单任务的过度使用。
对于事件处理，请尽量避免使用on-event attribute event handlers<div
改为尝试，按照演示1中使用的的链接，以便只将添加的<form>元素用作eventListener，而不是使用多个checkboxes.
- An替代引用表单控件的方式(例如
input、textarea等)是通过使用 API实现的。将输入封装到一个实际的<form>标记中，并为它们提供#id和/或[name]属性，我们可以使用简单而简短的语法。在这个演示中，它确实不是必需的，但这里有一个传统方式与事件delegation/HTMLFCCNormal方式的示例：
var chxs = document.querySelectorAll('type=checkbox')；for (设i= 0；i< chxs.length；i++) { chxsi.addEventListener('change'，message)；}
事件Delegation/HTMLFormControlsCollection
var form = document.forms.formID；form.addEventListener('change'，消息)；
演示2只使用CSS。
使用两个pseudo-classes:的
- [**`:checked`**](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked) gives us two states to change styles like `display:none/block`.
- `+` [**Adjacent Sibling Combinator**](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors) allows us fine grain control of elements that immediately follow the checkbox (as well as additional siblings and descendant nodes if needed).
演示中评论的详细信息
演示1
// Reference the form - see HTMLFormControlsCollection
var chxGrp = document.forms.checkGroup;
/* Register the change event to form.
|| Call message() function when a change event happens on or
|| within the form.
|| A change event occurs when the user enters data (*input*)
|| within a form control like an input (*focus*) then clicks onto
|| another (*unfocus*).
|| change event is different than most of the events because it
|| involves multple steps from the user, but it is very effective
|| for form controls.
*/
chxGrp.addEventListener('change', message);
/* The Event Object is passed through, you might've seen it as
|| "e" or "evt". How it's labelled doesn't matter because Event
|| Object is always available when you deal with the DOM.
*/
function message(event) {
// if the node clicked is a checkbox see if it's...
if (event.target.type === 'checkbox') {
// ... checked then...
if (event.target.checked) {
// ...find the node that follows it (i.e. <b>)...
event.target.nextElementSibling.className = "message";
} else {
/* Otherwise remove any class on it. (there's a more modern
|| method: classList that can be used instead)
*/
event.target.nextElementSibling.className = "";
}
}
return false;
}b {
display: none
}
label {
display: table
}
[type=checkbox] {
display: table-cell;
}
.message {
display: table-cell;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Wrapped the checkboxes with a <form> giving us opportunities:
HTMLFormControlsCollection API for specialized referencing and
Event Delegation allowing us to use a single eventListener for an
unlimited amount of event.targets (clicked, changed, inputed,
etc. buttons, links, etc.)-->
<form id='checkGroup'>
<p>Display some text when the checkbox is checked: </p>
<label>Checkbox 1: <input type="checkbox">
<b>Checkbox is CHECKED!</b>
</label><br>
<label>Checkbox 2: <input type="checkbox">
<b>Second checkbox is checked</b>
</label><br>
<label>Checkbox 3: <input type="checkbox">
<b>Third checkbox is checked</b>
</label><br>
</form>
</body>
</html>
演示2-仅CSS
/* Default state of message tag */
b {
display: none
}
/* Using label as a container that acts like a table */
label {
display: table
}
/* Checkboxes are normally set as a component that sits inline
with their siblings. Acting as a table-cell does that and has
additional advantages as well.
When the checkbox is :checked...
The adjacent sibling + <b> behaves as a table-cell as well,
thereby being shown/hidden by the corresponding checkbox being
toggled.
*/
[type=checkbox],
[type=checkbox]:checked + b {
display: table-cell;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Layout has been slightly re-arranged to take advantage of
styling combonations and tag behavior -->
<p>Display some text when the checkbox is checked: </p>
<label>Checkbox 1: <input type="checkbox">
<b>Checkbox is CHECKED!</b>
</label><br>
<label>Checkbox 2: <input type="checkbox">
<b>Second checkbox is checked</b>
</label><br>
<label>Checkbox 3: <input type="checkbox">
<b>Third checkbox is checked</b>
</label><br>
</body>
</html>
Stack Overflow用户
发布于 2018-03-16 11:29:09
您有多个元素具有相同的ID。请尝试将两个ID更改为末尾有一个数字(myCheck 1或myCheck2)，或者将其完全更改为其他值。这是我的建议：
function myFunction(idCheck, idText) {
var checkBox = document.getElementById(idCheck);
var text = document.getElementById(idText);
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}<html>
<body>
<p>Display some text when the checkbox is checked:</p>
Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction('myCheck', 'text')">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
Checkbox2: <input type="checkbox" id="myCheck1" onclick="myFunction('myCheck1', 'text1')">
<p id="text1" style="display:none">Second checkbox is checked</p>
Checkbox3: <input type="checkbox" id="myCheck2" onclick="myFunction('myCheck2', 'text2')">
<p id="text2" style="display:none">Third checkbox is checked</p>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49312676
复制相关文章
相似问题
腾讯云开发者
