如何在选择单选按钮时加载文本？

Question

I have a Radio button input which says No and Yes. How do I load "Hello World" when I select no, and "Hello World 1" when I select yes.

By default, both the hello world and hello world 1 should be disabled. Any help?

Regards, Bill

 <span>No</span> <span class="float-right mr-3"> <input type="radio" name="damage"> </span> <span class="">Yes</span> <span class="float-right mr-3"> <input type="radio" name="damage"> </span> <p>Hello World</p> <p>Hello World 1</p> 

Answer 1

You can modify your code to give each radio a data attribute and class. That way you can simplify the code and even plan ahead

 $(document).ready(function(){ $(document).on("change",".data-radio",function(){ $(".data-content").hide(); $($(this).data("content")).show(); }); }); 

 .data-content{display:none;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>No</span> <span class="float-right mr-3"> <input type="radio" class="data-radio" data-content=".no-damage" name="damage"> </span> <span class="">Yes</span> <span class="float-right mr-3"> <input type="radio" class="data-radio" data-content=".damaged" name="damage"> </span> <p class="data-content no-damage">No Damage!</p> <p class="data-content damaged">Damaged!</p> 

Answer 2

This answer might be easier to understand.

Here a single <p></p> element is created and a specific id="output-text" is given to it.

add onclick attribute to each radio button and in the listener function (in this code clicked() function) pass the data you want to so. And rest of work is done by javascript .

See the following code:

 function clicked(val) { document.getElementById("output-text").textContent = val; } 

 <span>No</span> <span class="float-right mr-3"> <input onclick="clicked('Hello World')" type="radio" name="damage"> </span> <span class="">Yes</span> <span class="float-right mr-3"> <input onclick="clicked('Hello World 1')" type="radio" name="damage"> </span> <p id="output-text"></p> 

Hope, this helps. Thanks.