复选框显示div
问题描述:
请给我一些帮助。我更多的是Jquery的初级部分,这使我疯狂。复选框显示div
我想打开& 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>
答
这应该做的伎俩?在这种情况下,我通常使用show()而不是toggle()。在复选框未被选中的情况下,还添加了if语句。干杯
$(document).ready(function() {
$(".div1").hide();
$(".mark").click(function() {
if (".mark").is(":checked")) {
$(this).next(".div1").show();
} else {
$(this).next(".div1").hide();
};
});
});
+0
谢谢你喜欢吃的东西! – bass71982
你能为所有这些特定的div生成一个通用/全局类吗? – bens