Question

我想在用户选择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>

Answer 1

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

Answer 2

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

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

或者你可以通过

获得class / id

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

Answer 3

您需要将一个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之前学习一些vanilla javascript，以便你可以完全理解幕后发生的事情。 MDN有一个很棒的入门指南！ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Answer 4

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

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

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

Answer 5

不需要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>

Answer 6

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>

Answer 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>

选中输入标记复选框时显示文字

7 个答案: