Question

在下面的代码中，我不知道这里有多少行是动态的。首先，我们必须隐藏所有div。当我在选中复选框后检查（//第一次输入）时，它的div应该是可见的。

<?php 
    $checkboxid=0;
    foreach($products as $product){ 
        $checkboxid = $checkboxid+1;
?>
    <tr>
       <td class="text-center">
          //first input<input name="checkbox[]" type="checkbox" value="<?php echo $product['id'];?>" id="<?php echo $checkboxid; ?>"><br/>              
          <div class="<?php echo $checkboxid; ?>">
              <input name="chile" type="checkbox" value="" ><br/>
              <input name="miami" type="checkbox" value="" >
          </div>
       </td>
    </tr>
<?php } ?>

Answer 1

使用类可以轻松实现，如下所示：

<input name="checkbox[]" type="checkbox" value="<?php echo $product['id'];?>" id="<?php echo $checkboxid; ?>" class="myCheckBox">

然后将更改处理程序附加到myCheckBox类，如下所示：

$(document).on('change', '.myCheckBox', function () {
  // or .next().next() change to .nextAll('div')
  // in case only one of div element are existed
  if ( this.checked ) $(this).next().next().show();
  else  $(this).next().next().hide();
});

为了更好的方法，将class放在各自的div中，如下所示：

<div class="<?php echo $checkboxid; ?> myDiv">
    <input name="chile" type="checkbox" value="" ><br/>
    <input name="miami" type="checkbox" value="" >
</div>

然后在js代码中，仅使用匹配的选择器过滤下一个输入：

$(document).on('change', '.myCheckBox', function () {      
  if ( this.checked ) $(this).nextAll('.myDiv').show();
  else  $(this).nextAll('.myDiv').hide();
});

<强>更新

我不知道有多少行，所以我们不能使用任何静态id或类

在这种情况下，class适合您

DEMO

Answer 2

$(document).ready(function () {
$('#checkbox1').change(function () {
    if (!this.checked) 
       $('#autoUpdate').fadeIn('slow');
    else 
        $('#autoUpdate').fadeOut('slow');
});
});

你可以这样做

<强> DEMO

如何通过复选框隐藏和显示我的div

2 个答案: