Question

我想使用jquery在检查时始终隐藏元素，并在取消选中时显示元素。经过一番研究后，我发现＆＃34;是＆＃34;属性，所以我创建了一个简单的html文件：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
if($("#s").is(':checked'))
    $("#test").hide();  // checked
else
    $("#test").show();
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p id="test">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<input type="checkbox" id="s">Click me</input>

</body>
</html>

现在由于某种原因，jquery不起作用。任何帮助将不胜感激。我也尝试过：

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

这也不起作用。

Answer 1

这在javascript中很简单。请尝试以下方法：

var cb = document.getElementById('isAgeSelected');
var txtAge = document.getElementById('txtAge');

$(document).ready(function(){
    cb.change= function(){
       if(cb.checked) {
          txtAge.style.display ='block';
       } else {
          txtAge.style.display ='none';
       }
    };
});

在JQuery中，您可以执行以下操作：

$(document).ready(function(){
   $('#s').on('change', function(){
      if($(this).is(":checked")){
         $('#txtAge').show();
      }
      else{
         $('#txtAge').hide();
      }
   });
});

Answer 2

您可以使用以下 jQuery onchange事件和.checked函数

执行此操作

$(document).ready(function(){
    $('#s').change(function(){
        if(this.checked)
                $("#test").hide();  // checked
        else
            $("#test").show();
        });
});

工作网址:: https://jsfiddle.net/qn0ne1uz/

Answer 3

好问题！

现在你差不多了。

$(document).ready(function(){ // <= !! you only evaluete the chackbox once (on document ready)
if($("#s").is(':checked'))
    $("#test").hide();  // checked
else
    $("#test").show();
});

你想要做的就是一直监视复选框，如下所示：

$('#s').bind('change', function() {
  if ($("#s").is(':checked'))
    $("#test").hide(); // checked
  else
    $("#test").show();
});

示例documentation

Answer 4

您只是在DOM准备就绪后检查一次复选框，而不应该在其更改事件

上执行此操作

$("#s").change(function(){
  if($(this).is(':checked')) 
    $("#test").hide(); // checked
  else
    $("#test").show(); 
});

Answer 5

我猜你在复选框改变时想要使用jQuery - 当你只是在文档加载时更改隐藏/显示它。

此外，ID需要是唯一的，或者jQuery只会获得第一个使用id选择器时带有id的项目。将测试ID更改为类。

如果您想要点击我更改复选框的状态，请将其转换为标签（认为您将其作为按钮）并定位输入（使用for="input-id或在输入周围包裹标签和文本）

尝试以下方法：

// this is to go in your document ready

$('#s').on('change', function() {  // bind to the change event of the chackbox
   // inside any change event, this is the js object of the thing that changed (ie the checkbox)
   if (this.checked) {
     $('.test').hide();
   } else {
     $('.test').show();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>
<!-- ids need to be unique so change this to a class or your jquery won't work -->
<p class="test">This is a paragraph.</p>
<p class="test">This is another paragraph.</p>

 <input type="checkbox" id="s"><label for="s">Click me</label>

Jquery复选框，用于隐藏或显示元素

5 个答案: