Hello everyone, I don't know much about javascript but I managed to put the following code together:

[AnankumarAadhi]

<input type="checkbox" id="myCheck" onclick="myFunction()"><h4> Live Single</h4>

    <p id="area" style="display:none">Sample</p>
                            
<input type="checkbox" id="myCheck" onclick="myFunction()"><h4> Live Corporate</h4>

    <p id="area" style="display:none"><span>$350.00</span>   </p>

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

[requinix]

And? Are you having problems with it?

What does your browser's error console say? Have you checked that you named everything correctly?

[AnankumarAadhi]

26 minutes ago, requinix said:

And? Are you having problems with it?

What does your browser's error console say? Have you checked that you named everything correctly?

 

 

Hi . Thanks for Reply 

the problem was only one check box working. 

[AnankumarAadhi]

           <div class="checkboxwrap">

                <input type="checkbox" id="myCheck" onclick="myFunction()"><h4> Live Single</h4></div>
                            <p id="text" style="display:none">Checkbox is CHECKED!</p>
                     

              <div class="checkboxwrap">
                                <input type="checkbox" id="myCheck" onclick="myFunction()"><h4> Live Corporate</h4>
                             </div>
                            <p id="text" style="display:none"><span>$350.00</span>      
                            </p>
                           
                           <div class="checkboxwrap">
                                <input type="checkbox" id="myCheck" onclick="myFunction()"><h4> Live &amp; Recording Combo - Single Viewer</h4></div>
                            <p id="text" style="display:none">testing</p>
                            <div class="checkboxwrap">
                                <input type="checkbox" id="myCheck" onclick="myFunction()"><h4>Live &amp; Recording Combo - Corporate Package</h4></div>
                            <div class="checkboxwrap">
                                <input type="checkbox" id="myCheck" onclick="myFunction()"> <h4>Recording - Single</h4></div>
                            <div class="checkboxwrap">
                                <input type="checkbox" id="myCheck" onclick="myFunction()">Recording -- Corporate</h4></div>
                            <li class="grey"><a href="#" class="button">Add to Cart</a></li>
                        </ul>
                    </div>
                 

 

 

           <script>
                        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";
                            }
                        }
                        
                    
                    </script>

[Barand]

IDs must be unique.

[cyberRobot]

Note that you can pass the checkbox element to the function using "this". For example:

<input type="checkbox" id="myCheck" onclick="myFunction(this)">

The function definition would then look like this

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

 

Side note: you should use <label> tags to connect your checkboxes with the corresponding labels. For example:

<label><input type="checkbox" id="myCheck" onclick="myFunction(this)"> Live Single</label>

That way you can click the "Live Single" text to check the box.

 

Also note that I removed the <h4> tags. Those tags should be reserved for actual page headings. Using them for styling purposes causes confusion for people visiting your website with assistive technologies like screen readers. If you need the text labels to appear larger or in bold, you could use CSS on the <label> tags.

[gizmola]

12 hours ago, Barand said:

IDs must be unique.

This is an important point that illustrates that you could improve your code with a better understanding of the html standards.   Here's a nice MDN page that covers the 'id' attribute.  

Keep in mind that the javascript DOM function getElementById() assumes that it will return one and only one object.

If you want to address via style or selection a number of items on a page, you should either find them via the type of object, or as children of their container, or with a shared style class.