Display text when input tag checkbox is selected

Question

I am trying to display a text when the user selects the input tag,

For example, I have the following code:

<tr> <td class="align"> Yes <br/> <input type="checkbox" /> </td> </tr>

Once the user clicks on the check box, the following text will appear:

"If you have selected yes,....."

And I am not sure if JavaScript would be the best path to do this.

But, If it is, would it be something like:

<script> $(function(){ if(input was checked)//not sure what would go here, new to Javascript display results//not sure either, new to Javascript }); </script>

Did you search anything as you are new in this ? Any references you found ? — Rayon
– Rayon, Commented Jul 1, 2016 at 19:12

Mohammad · Accepted Answer · 2016-07-05 18:36:50Z

If you can put the text after, you can do it in CSS.

Yes<br /> <input type="checkbox" /> <span class="message">You have said Yes</span>

.message { display: none; } input[type=checkbox]:checked ~ .message { display: block; }

Mr.7 · Accepted Answer · 2016-07-01 19:19:04Z

Using jQuery, To get the checkbox value, do something like this

$("input[type='checkbox']").val();

or you can get with class/id by

$('.chekboxClass').val(); $('#checkboxId').val();

dippas · Accepted Answer · 2016-07-01 19:20:15Z

no need JS,

you can achieve this with CSS only solution,

use the adjacent sibling selector + and :checked

.text { display: none } input:checked + .text { display: inline-block }

<table> <tr> <td> <span class="select">yes</span> <input type="checkbox" /> <span class="text">If you have selected yes,.....</span> </td> </tr> </table>

Lifz · Accepted Answer · 2016-07-01 19:22:41Z

$("#checkbox").click(function() {	$("#clickedYes").toggle($(this).prop("checked")); });

#clickedYes { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Yes <input id="checkbox" type="checkbox" /> <span id="clickedYes">If you have selected yes....</span>

Ninja Turtle · Accepted Answer · 2016-07-04 07:58:11Z

1

js:

if($('input').attr('checked')) { $('#box').append("<div>If you have selected yes,.....</div>"); }

html:

<tr> <td class="align" id="box"> <div>Yes</div> <input type="checkbox"/> </td> </tr>

edited Jul 4, 2016 at 7:58

answered Jul 1, 2016 at 19:22

Ninja Turtle

1562 silver badges18 bronze badges

2 Comments

Roberto Flores Over a year ago

How would I whatever I want after the Yes

Ninja Turtle Over a year ago

I have updated my answer @RobertoFlores. I hope this helps you. If you have any doubts you can ask me :)

Mohammad · Accepted Answer · 2016-07-05 18:38:14Z

You will want to hook up an onchange listener to the checkbox and have that call your function.

Here is some code snippet that will get you started.

var resultEle = document.getElementById("result"); function showAnswer(ele) { if(ele.checked) { result.innerHTML = "You checked Yes!"; } else { result.innerHTML = ""; } }

<table> <tr> <td class="align"> Yes<br /> <input type="checkbox" onchange="showAnswer(this)" /> </td> <td> <span id="result"></span> </td> </tr> </table>

EDIT: Looks like you are using JQuery, my answer is plain Javascript. I would strongly suggest you learn some vanilla javascript before using JQuery so that you can fully understand what is happening behind the scenes. MDN has a great starters guide! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

dwlorimer · Accepted Answer · 2019-12-06 16:40:25Z

To expand Andrew Herder and dippas answers for future visitors, you can do multiples on the same page using id tags also:

 <input id="item1-checkbox" type="checkbox" />Mark Yes <span id="item1">You have said Yes</span> <input id="item2-checkbox" type="checkbox" />Mark Agree <span id="item2">You have said Agree</span>

.

<style> #item1 { display: none } input#item1-checkbox:checked ~ #item1 { display: inline-block } #item2 { display: none } input#item2-checkbox ~ #item2 { display: inline-block } </style>

Collectives™ on Stack Overflow

Display text when input tag checkbox is selected

7 Answers 7

Comments

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Linked

Related