当输入标签复选框被选中时显示文本

Display text when input tag checkbox is selected

本文关键字：显示 文本 输入 标签 复选框      更新时间：2023-09-26

我试图在用户选择input标记时显示文本，

例如，我有以下代码:

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

一旦用户点击该复选框，将出现以下文本:

"如果您选择是，....."

和我不确定如果JavaScript将是最好的路径做到这一点。

但是，如果是的话，会不会是这样的:

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

如果你可以把文字放在后面，你可以在CSS中这样做。

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

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

使用jQuery，要获取复选框的值，执行如下操作

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

或者你可以通过

获得class/id

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

无需JS，

你可以通过CSS解决方案，

来实现这一点

使用相邻的兄弟选择器+和: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.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>

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>

您需要将onchange侦听器连接到复选框，并让它调用您的函数。

这里有一些代码片段可以让你开始。

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>

编辑:看起来你正在使用JQuery，我的答案是纯Javascript。我强烈建议您在使用JQuery之前学习一些javascript，这样您就可以完全理解幕后发生的事情。MDN有一个很棒的初学者指南!https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

为将来的访问者扩展Andrew Herder和dippas的答案，您可以在同一页面上使用id标记进行多次操作:

    <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>
相关文章：