【发布时间】：2019-08-12 11:55:27
【问题描述】：
我创建了一个模态框。在我的模态框中，有名为出版物和食物的子类别。每个子类别都链接到一个复选框，该复选框在单击时会改变颜色；它还选中并取消选中该复选框。我还添加了代码，允许在模式框关闭后将 div 中的文本加载到页面上。
我希望只有选中的类别才能在模式框关闭后将 div 中的信息加载到页面上。
基本上，如果用户选择通过单击将其变为红色来检查发布，我希望仅在模式框关闭后该 div 显示在页面上。 （其他类别反之亦然）
但是，如果用户已经检查了两个子类别，我希望在模式框关闭后两个 div 中的信息都显示在页面上。
我尝试为子类别和 div 创建新的唯一 ID，但由于某种原因，它们没有单独处理。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<style>
.onlyThese{
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label { color:blue }
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
}
input:focus{
outline: none;
}
</style>
<body>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5"; class="modal"; style="background-color:white">
<div style="float:left;">
<p> <input type="checkbox" id="group1" class="yourCheckbox" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv"> blastoise </div>
<p> <input type="checkbox" id="group2" class="yourCheckboxx" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<a href="#" rel="modal:close"; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>
<script>
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function(){
if($(this).prop("checked")) {
$('#myDiv, #myDivs').show();
content = $('#myDiv, #myDivs').html();
} else {
$('#myDiv, #myDivs').hide();
content = "";
}
});
$('[rel="modal:close"]').on('click',()=>{
$('.btn').parent().append(content);
})
</script>
</body>
</html>代码应该可以实现如下：
- -用户与名为部门的模态框交互
- 用户点击一个子类别将其变为红色，这也检查了 复选框
- -应用用户点击，并将来自特定类别 div 的信息加载到页面上
【问题讨论】：
标签： javascript php jquery html css