Jump to content

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


AnankumarAadhi

Recommended Posts

<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>

Link to comment
Share on other sites

           <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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.