复选框显示div

Question

请给我一些帮助。我更多的是Jquery的初级部分，这使我疯狂。

我想打开& close div class =“div1”当我检查&取消选中input class =“mark”复选框。问题是div class =“div1”和input class =“mark”的数量是动态的，取决于我从数据库中得到的数据。

下面的jquery是我试过的，它不工作。我认为.next应该可以工作。无论我生成多少输入类=标记，我可以显示如何隐藏div class =“div1”？

$(document).ready(function(){ 
 
$(".div1").hide(); 
 
$(".mark").click(function() { 
 
    $(this).next('.div1').toggle(); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 

 
<div class="panel panel-default"> 
 
<div class="panel-heading"><?php echo "$code - $name"; ?></div> 
 
<div class="panel-body"> 
 

 
<label>MARKETING?</label> 
 
<input class="mark" name="mark[]" type="checkbox" <?php if ($mark[$count] == 'Y') { ?> checked="checked" <?php } ?>/> 
 

 
<div class="div1"> 
 

 
<label>Product + Price</label> 
 
<input name="mark1[]" type="checkbox" <?php if ($mark1[$count] == 'Y') { ?> checked="checked" <?php } ?>/> 
 

 
<textarea class="form-control" name="markbox1[]" cols="50" rows="5"><?php echo htmlspecialchars($markbox1[$count]); ?></textarea> 
 

 
<label>Plus 10</label> 
 
<input name="mark2[]" type="checkbox" <?php if ($mark2[$count] == 'Y') { ?> checked="checked" <?php } ?>/> 
 

 
<textarea class="form-control" name="markbox2[]" cols="50" rows="5"><?php echo htmlspecialchars($markbox2[$count]); ?></textarea> 
 

 
<label>Data</label> 
 
<input name="mark3[]" type="checkbox" <?php if ($mark3[$count] == 'Y') { ?> checked="checked" <?php } ?>/> 
 

 
<textarea class="form-control" name="markbox3[]" cols="50" rows="5"><?php echo htmlspecialchars($markbox3[$count]); ?></textarea> 
 

 
<label>Social Media</label> 
 
<input name="mark4[]" type="checkbox" <?php if ($mark4[$count] == 'Y') { ?> checked="checked" <?php } ?> /> 
 

 
<textarea class="form-control" name="markbox4[]" cols="50" rows="5"><?php echo htmlspecialchars($markbox4[$count]); ?></textarea> 
 

 
</div> 
 

 
</div> 
 
</div>

Answer 1

这应该做的伎俩？在这种情况下，我通常使用show（）而不是toggle（）。在复选框未被选中的情况下，还添加了if语句。干杯

$(document).ready(function() { 
    $(".div1").hide(); 
    $(".mark").click(function() { 
     if (".mark").is(":checked")) { 
      $(this).next(".div1").show(); 
     } else { 
      $(this).next(".div1").hide(); 
     }; 
    }); 
});