複選框顯示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(); 
     }; 
    }); 
});