选中输入标签复选框时显示文本答案

【问题标题】：Display text when input tag checkbox is selected选中输入标签复选框时显示文本
【发布时间】：2016-11-04 06:51:15
【问题描述】：

当用户选择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>

【问题讨论】：

你是新来的，你搜索过什么吗？您找到任何参考资料？

标签： javascript html css checkbox

【解决方案1】：

如果你可以把文字放在后面，你可以用 CSS 来做。

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

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

【讨论】：

【解决方案2】：

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

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

或者你可以通过

获得class/id

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

【讨论】：

【解决方案3】：

不需要JS，

您可以通过纯 CSS 解决方案来实现这一点，

使用adjacent sibling selector+和: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>

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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>

【讨论】：

Yes 之后我要怎么做？
我已经更新了我的答案@RobertoFlores。我希望这可以帮助你。如果您有任何疑问，可以问我:)

【解决方案6】：

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

这里有一些代码 sn-p 可以帮助您入门。

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

【讨论】：

我爱魔兽争霸4O：

【解决方案7】：

要为未来的访问者扩展 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>

【讨论】：