Question

在下面的例子中，我有一个jQuery脚本，它将显示不同房屋的功能。例如，如果房子只有卧室，厨房和房间。学习 - 它将隐藏电视室＆amp;车库表（使用.hide（）和.show（））

我想进一步添加功能，如果选中复选框＆＃34; study＆＃34;勾选后，它只会显示每个房子的学习表。同样，如果＆＃34;研究＆＃34;和＆＃34;车库＆＃34;勾选它会显示车库。如果没有勾选复选框，则应显示所有表格。

我遇到困难的地方是，如果我在一个有车库的房子上，那么＃34; ＆安培; ＆＃34;电视室＆＃34;只有我过滤并检查＆＃34;研究＆＃34;，我不想看到一个标有研究的空表 - 它应该知道它被隐藏所以不显示它。

我该怎么做？干杯！

<html>
    <head>
    </head>
    <body>
        <input type="checkbox" value = "study">Study</body>
        <input type="checkbox" value = "bedroom">Bedroom</body>
        <input type="checkbox" value = "kitchen">Kitchen</body>
        <input type="checkbox" value = "tv room">TV Room</body>
        <input type="checkbox" value = "garage">Garage</body>
        <table id = "study"></table>
        <table id = "bedroom"></table>
        <table id = "kitchen"></table>
        <table id = "tv room"></table>
        <table id = "garage"></table>
    </body>
</html>

Answer 1

<强> JS

$("form input:checkbox").on("click",function(){
       var id = $(this).attr("value");
       if($(this).prop("checked"))
        $("#" + id).show();
       else
        $("#" + id).hide();
    });

Answer 2

设置并识别您的复选框（checkBoxTvRoom）并尝试以下操作。当然，您还必须为其余的复选框编写代码：）：

$(document).ready(function(){
   $('#checkBoxTvRoom').on('click',function(){
      if($(this).prop('checked') == 'checked')
      {
         $('#tvRoom').show();
      }else
      {
         $('#tvRoom').hide();
      }
   });
   //etc...
});

Answer 3

你有5个复选框，你想要“勾选复选框”学习“，它只会显示学习表”。所以如果你仍然使用复选框，你应该像单选按钮一样复选框。试试这个脚本

$("input:checkbox").click(function () {
  var tableid = $(this).val();
  $("input[name='room'").prop("checked", false);
  $(this).prop("checked", true);
  $("table[data-name='room'").hide();
  $('#' + tableid).show(500);
);

<{3}}

上的

演示

如何使用复选框显示/隐藏表格？

3 个答案: