如果选中复选框，则显示 "Activated" 否则显示 "Deactivated"

Question

我有这个复选框。

<input type="checkbox" value="" name="checkycheck"><label for="checkycheck">Activated</label>

我正在弄清楚如何在检查输入时将 "Activated" 显示为标签。输入不勾选时，显示"Deactivated".

所以再解释一下：

if(checkycheck == checked) {
     echo 'Activated';
} else {
     echo 'Deactivated';
}

那种看起来像 PHP，但我希望在 jQuery 中实时显示。我已经尝试查看 Google，但我真的没有太多的收获，我希望 jQuery 知识比我多的人可以帮助我。

非常感谢。

Answer 1

这是关于 Whosebug 的几个问题的副本。我昨天回答了一个，你可以看到here.

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>

Answer 2

$('#checkbox').on('change',function(){
if($(this).checked)
   $('label[for="checkbox"]').innerHtml('active');
else
   $('label[for="checkbox"]').innerHtml('deact');
});

这只是一个快速模型，您应该检查我的拼写。您还必须添加 "checkbox" 作为输入的 ID 以及名称

Answer 3

您应该给您的输入一个 id，因为这是标签可以使用 for 属性引用的内容。更改后，代码可能如下所示：

$('#checkycheck').change(function () {
  $('label[for="checkycheck"]').text(this.checked ? 'Activated' : 'Deactivated');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" value="" name="checkycheck" id="checkycheck">
<label for="checkycheck">Activated</label>

注意接近尾声的 change() 调用，它确保代码也在页面加载时执行，从一开始就正确设置文本。

如果选中复选框，则显示 "Activated" 否则显示 "Deactivated"

If checkbox is checked, show "Activated" else show "Deactivated"

jquery

checkbox

label

checked