Display text when input tag checkbox is selected

问题

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>

回答1:

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

回答2:

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>

回答3:

$("#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>

回答4:

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>

回答5:

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

回答6:

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

回答7:

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>

来源：https://stackoverflow.com/questions/38152523/display-text-when-input-tag-checkbox-is-selected

标签

javascript

html

css

checkbox