仅当选中复选框时，单击按钮后显示多个div

Question

我想在单击提交按钮后显示一个或两个div，但前提是选中了第一个和/或第二个复选框。我有这个代码：

var first = true;
$('input[type="checkbox"][name^=chk]').change(function() {
var $target = $('#sb' + this.id.replace('chk', '')).toggle(this.checked);
if (first) {
$('div[id^=sb]').not($target).hide();
first = false;
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2
<div id="sb1" style="display: none;">Checkbox content one</div>
<div id="sb2" style="display: none;">Checkbox content two</div>

我不是JavaScript专家。有没有办法在点击按钮后添加一个提交按钮来显示第一个或/和第二个div？

Answer 1

我想最简单的方法是在按钮上实现onClick((事件，该事件具有检查是否选中复选框的功能。

function showDiv(){
if(document.getElementById('chk1').checked){ 
$div1.show()
} else {
$div1.hide()
}
if(document.getElementById('chk2').checked){
$div2.show()
} else {
$div2.hide()
}
}

这里有一个工作示例：https://jsfiddle.net/j30reczv/24/