我如何使这个Javascript复选框触发动作工作像我的CSS唯一的例子

How do I make this Javascript checkbox trigger action work like my CSS only example

本文关键字：我的 工作 CSS 唯一 何使这 Javascript 复选框      更新时间：2023-09-26

我使用下面的代码来测试"如果"一个复选框在页面加载时被选中。如果是，那么将显示一个特定的附加字段(称为myfield):

<style>
#myfield {
    display: none;
}
</style>    

<input type="checkbox" id="mycheckbox" name="mycheckbox" />
<input type='text' id='myfield' name='myfield' />

<script>
if ($("#mycheckbox").is(":checked")) {
document.getElementById("id").style.display="block";
}
</script>

但是，这只在页面加载并且复选框已经被选中时才有效。当页面加载时没有选中这个框时，它就不能工作了，你去点击这个框。我想要隐藏的字段显示，当框被"选中"，而不需要重新加载页面。然后，我希望myfield在未选中框时立即隐藏。

有谁能指出更好的/正确的方法来做这件事吗?另外

:

注意:我确实知道如何在CSS中使用标签来做到这一点，但我需要在其他时候使用javascript。

下面是在现代浏览器中使用CSS的效果:http://jsfiddle.net/3KTC3/

这里的CSS只有jsfiddle代码:

<style type="text/css">
.label-for-check {
    display:none;
}
.check-with-label:checked + .label-for-check {
display:block;  
}
</style>   

<div>
<input type="checkbox" id="check" class="check-with-label" />
  <label for="check" class="label-for-check">
        <br /><br />MyField<br />
    <input type='text' id='myfield' name='myfield' size='10'  />
</label>
<div>

您需要附加change事件处理程序。你发布的代码只在页面加载时执行，它不会监视元素的状态。

这是一个相当于CSS版本的jQuery，带有类和相邻的选择器:

$('.check-with-label').change(function() {
    $(this).next().toggle(this.checked);
}).change();

小提琴

解释:this引用被单击的复选框，获得next元素(相当于您的CSS +选择器)和toggle其显示基于复选框的选中状态。

另一个版本只适用于你的两个给定id:

$('#mycheckbox').change(function() {
    $('#myfield').toggle(this.checked);
}).change();

小提琴

请注意，您的CSS版本兼容所有桌面浏览器，包括IE7及以上。考虑是否有必要使用JS。

edit:您必须在附加它之后触发更改处理程序，所以如果在加载页面时复选框已经被选中，则触发的处理程序将显示该字段。

你的问题是jQuery将只检查一次(当你加载网站)，如果你的复选框被选中。

更改处理程序将在每次用户更改复选框时触发，如果选中它将显示#myfield

像这样做:

$('#mycheckbox').change(function() {
    if ($(this).is(":checked")) {
      $('#myfield').show()
    }
});

$(document).ready(function(){
    if($("#mycheckbox").is(":checked")) $('#myfield').show();
    $('#mycheckbox').on('change', function(){
        if($(this).is(":checked")) {
            $('#myfield').show();
        } else {
            $('#myfield').hide();
        }
    })
});
相关文章：