javascript - Display text when input tag checkbox is selected - Stack Overflow

admin管理员组

文章数量:1323323

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>

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>

• javascript
• html
• css
• checkbox

Share Follow edited Jul 1, 2016 at 22:22 dippas 60.6k1515 gold badges122122 silver badges132132 bronze badges asked Jul 1, 2016 at 19:11 Roberto FloresRoberto Flores 78922 gold badges1616 silver badges4949 bronze badges 1

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

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

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

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();

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>

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

#clickedYes {
  display: none;
}

<script src="https://ajax.googleapis./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>

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>

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/en-US/docs/Web/JavaScript/Guide

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>

本文标签： javascriptDisplay text when input tag checkbox is selectedStack Overflow