blocks|key|73989|text|您有多个元素具有相同的ID。请尝试将两个ID更改为末尾有一个数字(myCheck+1或myCheck2)，或者将其完全更改为其他值。这是我的建议：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73990|​|73991|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";
++++}
}|code-block|syntax|javascript|73992|<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>|73993|73994|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You have multiple elements with the same ID. Try changing two ID's to have either a number on the end (myCheck 1 or myCheck2), or change it to something else completely. Here's my suggestion:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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";
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;body&gt;

&lt;p&gt;Display some text when the checkbox is checked:&lt;/p&gt;

Checkbox: &lt;input type="checkbox" id="myCheck"  onclick="myFunction('myCheck', 'text')"&gt;

&lt;p id="text" style="display:none"&gt;Checkbox is CHECKED!&lt;/p&gt;

Checkbox2: &lt;input type="checkbox" id="myCheck1"  onclick="myFunction('myCheck1', 'text1')"&gt;

&lt;p id="text1" style="display:none"&gt;Second checkbox is checked&lt;/p&gt;

Checkbox3: &lt;input type="checkbox" id="myCheck2"  onclick="myFunction('myCheck2', 'text2')"&gt;

&lt;p id="text2" style="display:none"&gt;Third checkbox is checked&lt;/p&gt;



&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|629896|text|首先，你需要有输入类型的复选框和uniq+id。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629897|<input+type="checkbox"+id="uniq_id"+/>|code-block|syntax|javascript|629898|然后在脚本中调用您的函数|629899|$("#uniq_id").click(+function(){
++if(+$(this).is(':checked')+){+
+++++//call+your+function+here
+++++myFunction(this);++
+++}
});|629900|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>First you need to have input type checkbox with uniq id.</p>

<pre><code>&lt;input type="checkbox" id="uniq_id" /&gt;
</code></pre>

<p>Then in script, call your function</p>

<pre><code>$("#uniq_id").click( function(){
  if( $(this).is(':checked') ){ 
     //call your function here
     myFunction(this);  
   }
});
</code></pre>


blocks|key|2542014|text|id必须是唯一的。使用this.id通过onclick处理程序传递id|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2542015|​|2542016|function+myFunction(id)+{
++var+checkBox+=+document.getElementById(id);
++var+text+=+document.getElementById("text");
++if+(checkBox.checked+===+true)+{
++++text.style.display+=+"block";
++}+else+{
++++text.style.display+=+"none";
++}
}|code-block|syntax|javascript|2542017|<p>Display+some+text+when+the+checkbox+is+checked:</p>

Checkbox:+<input+type="checkbox"+id="myCheck"+onclick="myFunction(this.id)">

<p+id="text"+style="display:none">Checkbox+is+CHECKED!</p>

Checkbox2:+<input+type="checkbox"+id="myCheck2"+onclick="myFunction(this.id)">

<p+id="text"+style="display:none">Second+checkbox+is+checked</p>

Checkbox3:+<input+type="checkbox"+id="myCheck3"+onclick="myFunction(this.id)">

<p+id="text"+style="display:none">Third+checkbox+is+checked</p>|2542018|2542019|entityMap^0|B|7|K|7|X|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>id need to be unique. Pass the <code>id</code> through the <code>onclick</code> handler using <code>this.id</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(id) {
  var checkBox = document.getElementById(id);
  var text = document.getElementById("text");
  if (checkBox.checked === true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Display some text when the checkbox is checked:&lt;/p&gt;

Checkbox: &lt;input type="checkbox" id="myCheck" onclick="myFunction(this.id)"&gt;

&lt;p id="text" style="display:none"&gt;Checkbox is CHECKED!&lt;/p&gt;

Checkbox2: &lt;input type="checkbox" id="myCheck2" onclick="myFunction(this.id)"&gt;

&lt;p id="text" style="display:none"&gt;Second checkbox is checked&lt;/p&gt;

Checkbox3: &lt;input type="checkbox" id="myCheck3" onclick="myFunction(this.id)"&gt;

&lt;p id="text" style="display:none"&gt;Third checkbox is checked&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|74085|text|因为id是唯一的标识符，所以你的函数总是选择第一个复选框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74086|document.getElementById("myCheck");|code-block|syntax|javascript|74087|您需要将其修改为smth。像这样|74088|<!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_"+%2B+id);
++++++++++++if+(checkBox.checked+==+true)+{
++++++++++++++++text.style.display+=+"block";
++++++++++++}+else+{
++++++++++++++++text.style.display+=+"none";
++++++++++++}
++++++++}
++++</script>
</body>
</html>|74089|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Well, since id is unique identifier your function always selects first checkbox.</p>

<pre><code>document.getElementById("myCheck");
</code></pre>

<p>You need to modify it to smth. like this</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

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

    Checkbox2:
    &lt;input type="checkbox" id="check_2" onclick="myFunction(event)"&gt;
    &lt;p id="text_check_2" style="display:none"&gt;Second checkbox is checked&lt;/p&gt;

    Checkbox3:
    &lt;input type="checkbox" id="check_3" onclick="myFunction(event)"&gt;
    &lt;p id="text_check_3" style="display:none"&gt;Third checkbox is checked&lt;/p&gt;

    &lt;script&gt;
        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";
            }
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|74094|text|id必须唯一，可以将checkbox和p的id作为参数传入函数，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|74095|​|74096|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";
++++}
}|code-block|syntax|javascript|74097|<!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>|74098|74099|entityMap^0|0|2|A|8|J|1|L|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|Q|$]]

<p><code>id</code> must be unique, You can pass <code>id</code> of both <code>checkbox</code> and <code>p</code> as parameter to function as follows,</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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";
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p&gt;Display some text when the checkbox is checked:&lt;/p&gt;

Checkbox: &lt;input type="checkbox" id="myCheck1"  onclick="myFunction(this.id,'text1')"&gt;

&lt;p id="text1" style="display:none"&gt;Checkbox is CHECKED!&lt;/p&gt;

Checkbox2: &lt;input type="checkbox" id="myCheck2"  onclick="myFunction(this.id,'text2')"&gt;

&lt;p id="text2" style="display:none"&gt;Second checkbox is checked&lt;/p&gt;

Checkbox3: &lt;input type="checkbox" id="myCheck3"  onclick="myFunction(this.id,'text3')"&gt;

&lt;p id="text3" style="display:none"&gt;Third checkbox is checked&lt;/p&gt;



&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3854513|text|实际上，您必须使用不同的it，而且不需要多个p元素，最后，为了避免不必要的查询，您可以将单击的元素传递给函数，因为您是通过onclick属性调用它的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3854514|​|3854515|function+myFunction(elem)+{
++++var+checkBox+=+elem;
++++var+p+=+document.getElementsByTagName('p')[1];
++++if+(checkBox.checked+==+true){
++++++++p.innerHTML+=+"Checkbox+<b>"+%2B+checkBox.id+%2B+"</b>+is+CHECKED!"
++++++++p.style.display+=+"block";
++++}+else+{
+++++++p.style.display+=+"none";
++++}
}|code-block|syntax|javascript|3854516|<!DOCTYPE+html>
<html>
<body>

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

Checkbox:+<input+type="checkbox"+id="myCheck1"++onclick="myFunction(this)">

<p+class="text"+style="display:none"></p>

Checkbox2:+<input+type="checkbox"+id="myCheck2"++onclick="myFunction(this)">

Checkbox3:+<input+type="checkbox"+id="myCheck3"++onclick="myFunction(this)">

</body>
</html>|3854517|3854518|HIH|3854519|entityMap^0|M|1|1P|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>Indeed you have to use different IDs, also you don't need several <code>p</code> elements for that and lastly to avoid unnecessary queries, you could pass the clicked element to the function since you are calling it via the <code>onclick</code> attr.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(elem) {
    var checkBox = elem;
    var p = document.getElementsByTagName('p')[1];
    if (checkBox.checked == true){
        p.innerHTML = "Checkbox &lt;b&gt;" + checkBox.id + "&lt;/b&gt; is CHECKED!"
        p.style.display = "block";
    } else {
       p.style.display = "none";
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p&gt;Display some text when the checkbox is checked:&lt;/p&gt;

Checkbox: &lt;input type="checkbox" id="myCheck1"  onclick="myFunction(this)"&gt;

&lt;p class="text" style="display:none"&gt;&lt;/p&gt;

Checkbox2: &lt;input type="checkbox" id="myCheck2"  onclick="myFunction(this)"&gt;

Checkbox3: &lt;input type="checkbox" id="myCheck3"  onclick="myFunction(this)"&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>HIH</p>


blocks|key|2549651|text|你根本不需要javascript或jquery+-这可以单独使用CSS来实现-使用直接兄弟选择器和:checked伪选择器，你可以在下一个p上设置显示或可见性属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2549652|您确实有多个id，因此需要进行更正-但CSS是您在选中复选框后切换下一个p所需的全部内容。|2549653|​|2549654|p{display:+none}
input[type="checkbox"]:checked+%2B+p+{display:+block}|code-block|syntax|javascript|2549655|<p>Display+some+text+when+the+checkbox+is+checked:</p>

Checkbox:+<input+type="checkbox"+id="myCheck1">
<p>First+Checkbox+is+CHECKED!</p>

Checkbox2:+<input+type="checkbox"+id="myCheck2">

<p>Second+checkbox+is+checked</p>

Checkbox3:+<input+type="checkbox"+id="myCheck2">

<p>Third+checkbox+is+checked</p>|2549656|2549657|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You don't need javascript or jquery at all - this can be achieved using CSS alone - using the direct sibling selector and the :checked pseudo selector you can set the display or visibility property on the next p.</p>

<p>You did have multiple id's so that needs to be corrected - but CSS is all you need to toggle the next p after the checked checkbox.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>p{display: none}
input[type="checkbox"]:checked + p {display: block}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Display some text when the checkbox is checked:&lt;/p&gt;

Checkbox: &lt;input type="checkbox" id="myCheck1"&gt;
&lt;p&gt;First Checkbox is CHECKED!&lt;/p&gt;

Checkbox2: &lt;input type="checkbox" id="myCheck2"&gt;

&lt;p&gt;Second checkbox is checked&lt;/p&gt;

Checkbox3: &lt;input type="checkbox" id="myCheck2"&gt;

&lt;p&gt;Third checkbox is checked&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|629966|text|不再继续讨论why+#IDs+need+to+be+unique的重要性，以及它是如何阻碍复选框的预期行为的。有两个demo：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|629967|IMO+1使用JavaScript，这是对于简单任务的过度使用。|style|BOLD|629968|对于事件处理，请尽量避免使用on-event+attribute+event+handlers<div+|CODE|629969|unordered-list-item|629970|629971|改为尝试，按照演示1中使用的的链接，以便只将添加的<form>元素用作eventListener，而不是使用多个checkboxes.|629972|An替代引用表单控件的方式(例如input、textarea等)是通过使用+API实现的。将输入封装到一个实际的<form>标记中，并为它们提供#id和/或[name]属性，我们可以使用简单而简短的语法。在这个演示中，它确实不是必需的，但这里有一个传统方式与事件delegation/HTMLFCCNormal方式的示例：|629973|629974|var+chxs+=+document.querySelectorAll('type=checkbox')；for+(设i=+0；i<+chxs.length；i%2B%2B)+{+chxsi.addEventListener('change'，message)；}|629975|事件Delegation/HTMLFormControlsCollection|629976|var+form+=+document.forms.formID；form.addEventListener('change'，消息)；|629977|629978|​|629979|演示2只使用CSS。|629980|使用两个pseudo-classes:的|629981|629982|629983|-+[**`:checked`**](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)+gives+us+two+states+to+change+styles+like+`display:none/block`.
-+`%2B`+[**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).++|code-block|syntax|javascript|629984|629985|629986|演示中评论的详细信息|629987|演示1|629988|629989|//+Reference+the+form+-+see+HTMLFormControlsCollection
var+chxGrp+=+document.forms.checkGroup;

/*+Register+the+change+event+to+form.+
%7C%7C+Call+message()+function+when+a+change+event+happens+on+or+
%7C%7C+within+the+form.
%7C%7C+A+change+event+occurs+when+the+user+enters+data+(*input*)+
%7C%7C+within+a+form+control+like+an+input+(*focus*)+then+clicks+onto
%7C%7C+another+(*unfocus*).
%7C%7C+change+event+is+different+than+most+of+the+events+because+it
%7C%7C+involves+multple+steps+from+the+user,+but+it+is+very+effective+
%7C%7C+for+form+controls.
*/
chxGrp.addEventListener('change',+message);

/*+The+Event+Object+is+passed+through,+you+might've+seen+it+as+
%7C%7C+"e"+or+"evt".+How+it's+labelled+doesn't+matter+because+Event
%7C%7C+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
++++++%7C%7C+method:+classList+that+can+be+used+instead)
++++++*/
++++++event.target.nextElementSibling.className+=+"";
++++}
++}
++return+false;
}|629990|b+{
++display:+none
}

label+{
++display:+table
}

[type=checkbox]+{
++display:+table-cell;
}

.message+{
++display:+table-cell;
}|629991|<!DOCTYPE+html>
<html>

<head>
</head>

<body>

++<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>|629992|629993|演示2-仅CSS|629994|629995|/*+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+%2B+<b>+behaves+as+a+table-cell+as+well,
thereby+being+shown/hidden+by+the+corresponding+checkbox+being
toggled.
*/

[type=checkbox],
[type=checkbox]:checked+%2B+b+{
++display:+table-cell;
}|629996|<!DOCTYPE+html>
<html>

<head>
</head>

<body>
++
++<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>|629997|629998|entityMap|0|LINK|mutability|MUTABLE|url|https://www.deque.com/blog/unique-id-attributes-matter/|1|https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers|2|https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection^0|6|Q|0|0|K|C|0|0|1F|1B|4|E|X|1|0|0|0|0|1V|P|6|0|0|4H|G|5|M|8|1K|6|20|3|26|6|11|4|2|0|0|0|3L|0|0|13|0|0|1W|0|0|0|1|0|0|A|0|0|K|0|0|0|0|0|1|0|0|0|2|6|4|0|0|3|0|0|1|0|0|0|0|0|1|0|0|8|0|0|1|0|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|2A|8|@]|9|@$A|2B|B|2C|1|2D]]|C|$]]|$1|D|3|E|5|6|7|2E|8|@$A|2F|B|2G|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|2H|8|@$A|2I|B|2J|F|G]|$A|2K|B|2L|F|J]]|9|@$A|2M|B|2N|1|2O]]|C|$]]|$1|K|3|-4|5|L|7|2P|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|2Q|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|2R|8|@$A|2S|B|2T|F|G]|$A|2U|B|2V|F|J]]|9|@]|C|$]]|$1|P|3|Q|5|L|7|2W|8|@$A|2X|B|2Y|F|G]|$A|2Z|B|30|F|J]|$A|31|B|32|F|J]|$A|33|B|34|F|J]|$A|35|B|36|F|J]|$A|37|B|38|F|J]]|9|@$A|39|B|3A|1|3B]]|C|$]]|$1|R|3|-4|5|6|7|3C|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|3D|8|@$A|3E|B|3F|F|G]]|9|@]|C|$]]|$1|U|3|V|5|6|7|3G|8|@$A|3H|B|3I|F|G]]|9|@]|C|$]]|$1|W|3|X|5|6|7|3J|8|@$A|3K|B|3L|F|G]]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|3M|8|@]|9|@]|C|$]]|$1|Z|3|10|5|6|7|3N|8|@$A|3O|B|3P|F|G]]|9|@]|C|$]]|$1|11|3|12|5|6|7|3Q|8|@$A|3R|B|3S|F|G]]|9|@]|C|$]]|$1|13|3|14|5|6|7|3T|8|@$A|3U|B|3V|F|G]]|9|@]|C|$]]|$1|15|3|-4|5|L|7|3W|8|@]|9|@]|C|$]]|$1|16|3|-4|5|6|7|3X|8|@]|9|@]|C|$]]|$1|17|3|18|5|19|7|3Y|8|@]|9|@]|C|$1A|1B]]|$1|1C|3|10|5|6|7|3Z|8|@$A|40|B|41|F|G]]|9|@]|C|$]]|$1|1D|3|-4|5|6|7|42|8|@]|9|@]|C|$]]|$1|1E|3|1F|5|6|7|43|8|@$A|44|B|45|F|G]|$A|46|B|47|F|G]]|9|@]|C|$]]|$1|1G|3|1H|5|6|7|48|8|@$A|49|B|4A|F|G]]|9|@]|C|$]]|$1|1I|3|10|5|6|7|4B|8|@$A|4C|B|4D|F|G]]|9|@]|C|$]]|$1|1J|3|1K|5|19|7|4E|8|@]|9|@]|C|$1A|1B]]|$1|1L|3|1M|5|19|7|4F|8|@]|9|@]|C|$1A|1B]]|$1|1N|3|1O|5|19|7|4G|8|@]|9|@]|C|$1A|1B]]|$1|1P|3|10|5|6|7|4H|8|@$A|4I|B|4J|F|G]]|9|@]|C|$]]|$1|1Q|3|1R|5|6|7|4K|8|@$A|4L|B|4M|F|G]]|9|@]|C|$]]|$1|1S|3|10|5|6|7|4N|8|@$A|4O|B|4P|F|G]]|9|@]|C|$]]|$1|1T|3|1U|5|19|7|4Q|8|@]|9|@]|C|$1A|1B]]|$1|1V|3|1W|5|19|7|4R|8|@]|9|@]|C|$1A|1B]]|$1|1X|3|10|5|6|7|4S|8|@$A|4T|B|4U|F|G]]|9|@]|C|$]]|$1|1Y|3|-4|5|6|7|4V|8|@]|9|@]|C|$]]]|1Z|$20|$5|21|22|23|C|$24|25]]|26|$5|21|22|23|C|$24|27]]|28|$5|21|22|23|C|$24|29]]]]

<p>Not going to go on about the importance of <a href="https://www.deque.com/blog/unique-id-attributes-matter/" rel="nofollow noreferrer">why #IDs need to be unique</a> and how that hobbles the expected behavior of the checkboxes. There are 2 demos:</p>

<p><strong>Demo 1</strong> uses JavaScript which is IMO overkill for a simple task. </p>

<ol>
<li><p>For event handling, try to avoid using <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers" rel="nofollow noreferrer">on-event attribute event handlers</a>:</p>

<p><code>&lt;div</code> <strong>onclick="func();"</strong><code>&gt;&lt;/div&gt;</code></p>

<p>Try <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" rel="nofollow noreferrer"><code>addEventListener()</code></a></strong> instead, follow the links for details.</p></li>
<li><p><a href="https://www.kirupa.com/html5/handling_events_for_many_elements.htm" rel="nofollow noreferrer"><strong>Event Delegation</strong></a> is used in <strong>Demo 1</strong> so only the added <code>&lt;form&gt;</code> element is used as the eventListener instead of multiple checkboxes.</p></li>
<li><p>An alternate way of referencing form controls (ex. <code>input</code>, <code>textarea</code>, etc) is by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection" rel="nofollow noreferrer"><strong>HTMLFormControlsCollection</strong> API</a>. Wrapping inputs into an actual <code>&lt;form&gt;</code> tag and giving them <code>#id</code> and/or <code>[name]</code> attributes we can use a simple and short syntax. In this demo it really isn't needed but here's an example of a conventional way vs. <strong>event delegation/HTMLFCC</strong>:</p>

<p><strong>Normal way:</strong></p>

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

<p><strong>Event Delegation/HTMLFormControlsCollection</strong></p>

<pre><code> var form = document.forms.formID;

 form.addEventListener('change', message);
</code></pre>

   <hr></li>
</ol>

<p><strong>Demo 2</strong> uses CSS only. </p>

<ul>
<li><p>Using two pseudo-classes:</p>

<ul>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked" rel="nofollow noreferrer"><strong><code>:checked</code></strong></a> gives us two states to change styles like <code>display:none/block</code>.</p></li>
<li><p><code>+</code> <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors" rel="nofollow noreferrer">Adjacent Sibling Combinator</a></strong> allows us fine grain control of elements that immediately follow the checkbox (as well as additional siblings and descendant nodes if needed).  </p></li>
</ul></li>
</ul>

<hr>

<p><strong>Details commented in Demos</strong></p>

<h2>Demo 1</h2>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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. &lt;b&gt;)...
      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;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>b {
  display: none
}

label {
  display: table
}

[type=checkbox] {
  display: table-cell;
}

.message {
  display: table-cell;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;!-- Wrapped the checkboxes with a &lt;form&gt; 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.)--&gt;
  &lt;form id='checkGroup'&gt;

    &lt;p&gt;Display some text when the checkbox is checked: &lt;/p&gt;

    &lt;label&gt;Checkbox 1: &lt;input type="checkbox"&gt;
  &lt;b&gt;Checkbox is CHECKED!&lt;/b&gt;
  &lt;/label&gt;&lt;br&gt;

    &lt;label&gt;Checkbox 2: &lt;input type="checkbox"&gt;
  &lt;b&gt;Second checkbox is checked&lt;/b&gt;
  &lt;/label&gt;&lt;br&gt;

    &lt;label&gt;Checkbox 3: &lt;input type="checkbox"&gt;
  &lt;b&gt;Third checkbox is checked&lt;/b&gt;
  &lt;/label&gt;&lt;br&gt;

  &lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<h2>Demo 2 - CSS Only</h2>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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 + &lt;b&gt; 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;!-- Layout has been slightly re-arranged to take advantage of 
styling combonations and tag behavior --&gt;
  &lt;p&gt;Display some text when the checkbox is checked: &lt;/p&gt;

  &lt;label&gt;Checkbox 1: &lt;input type="checkbox"&gt;
  &lt;b&gt;Checkbox is CHECKED!&lt;/b&gt;
  &lt;/label&gt;&lt;br&gt;

  &lt;label&gt;Checkbox 2: &lt;input type="checkbox"&gt;
  &lt;b&gt;Second checkbox is checked&lt;/b&gt;
  &lt;/label&gt;&lt;br&gt;

  &lt;label&gt;Checkbox 3: &lt;input type="checkbox"&gt;
  &lt;b&gt;Third checkbox is checked&lt;/b&gt;
  &lt;/label&gt;&lt;br&gt;



&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>I know it should be simple, but I couldn't find a way to do it and I have a feeling that is simple but I am stuck. I am trying to display a message every time a checkbox is checked. I have the code below but I can only display the message for the first checkbox. I am just starting with Javascript. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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";
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p&gt;Display some text when the checkbox is checked:&lt;/p&gt;

Checkbox: &lt;input type="checkbox" id="myCheck"  onclick="myFunction()"&gt;

&lt;p id="text" style="display:none"&gt;Checkbox is CHECKED!&lt;/p&gt;

Checkbox2: &lt;input type="checkbox" id="myCheck"  onclick="myFunction()"&gt;

&lt;p id="text" style="display:none"&gt;Second checkbox is checked&lt;/p&gt;

Checkbox3: &lt;input type="checkbox" id="myCheck"  onclick="myFunction()"&gt;

&lt;p id="text" style="display:none"&gt;Third checkbox is checked&lt;/p&gt;



&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


Display message when checkbox is checked in Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道这应该很简单，但我找不到一种方法去做，我有一种感觉很简单，但我被卡住了。每次选中复选框时，我都会尝试显示一条消息。我有下面的代码，但我只能显示第一个复选框的消息。我刚刚开始使用Javascript。​function myFunction() {    var checkBox = document.getEle...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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