使用javascript显示选定复选框的列表
我有一套7天的复选框,通用名称为sessionDays。我已使用此代码对复选框进行计数:使用javascript显示选定复选框的列表,javascript,twitter-bootstrap,checkbox,bootstrap-4,Javascript,Twitter Bootstrap,Checkbox,Bootstrap 4,我有一套7天的复选框,通用名称为sessionDays。我已使用此代码对复选框进行计数: var totalDays = document.querySelectorAll('.sessionDays input[type="checkbox"]:checked').length; 现在我需要用Javascript在HTML中显示选中复选框的列表。不是jQuery。我研究了许多问题,但没有找到解决办法 这是我的HTML: <div class="days sessionDays">
var totalDays = document.querySelectorAll('.sessionDays input[type="checkbox"]:checked').length;
现在我需要用Javascript在HTML中显示选中复选框的列表。不是jQuery。我研究了许多问题,但没有找到解决办法
这是我的HTML:
<div class="days sessionDays">
<label>Select Session Days</label>
<p class="text-muted">Select the specific days you want to come for training.</p>
<div class="form-check">
<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSunday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetMorning();">
<label class="form-check-label" for="sessionSunday">
Sunday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionMonday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetEvening();">
<label class="form-check-label" for="sessionMonday">
Monday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionTuesday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetEvening();">
<label class="form-check-label" for="sessionTuesday">
Tuesday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionWednesday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetEvening();">
<label class="form-check-label" for="sessionWednesday">
Wednesday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionThursday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetEvening();">
<label class="form-check-label" for="sessionThursday">
Thursday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionFriday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetEvening();">
<label class="form-check-label" for="sessionFriday">
Friday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSaturday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetMorning();">
<label class="form-check-label" for="sessionSaturday">
Saturday
</label>
</div>
</div>
选择会话日
选择您希望参加培训的具体日期
星期日
星期一
星期二
星期三
星期四
星期五
星期六
这里是JSFiddle:您就快到了。querySelectorAll调用将返回选中控件的数组。 请尝试以下代码:
<html>
<head>
<title>Random</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="days sessionDays">
<label>Select Session Days</label>
<p class="text-muted">Select the specific days you want to come for training.</p>
<div class="form-check">
<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSunday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionSunday">
Sunday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionMonday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionMonday">
Monday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionTuesday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionTuesday">
Tuesday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionWednesday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionWednesday">
Wednesday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionThursday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionThursday">
Thursday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionFriday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionFriday">
Friday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSaturday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionSaturday">
Saturday
</label>
</div>
</div>
<script type="text/javascript">
function whatsChecked() {
var foo = [];
var things = document.querySelectorAll('.sessionDays input[type="checkbox"]:checked');
for (var i = 0; i < things.length; i++) {
foo[i] = things[i].id;
}
for (var i = 0; i < things.length; i++) {
console.log(things[i].id);
}
}
</script>
</body>
</html>
随机的
选择会话日
选择您希望参加培训的具体日期
星期日
星期一
星期二
星期三
星期四
星期五
星期六
函数whatsChecked(){
var foo=[];
var things=document.querySelectorAll('.sessionDays input[type=“checkbox”]:checked');
for(var i=0;i
你就快到了。querySelectorAll调用将返回选中控件的数组。
请尝试以下代码:
<html>
<head>
<title>Random</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="days sessionDays">
<label>Select Session Days</label>
<p class="text-muted">Select the specific days you want to come for training.</p>
<div class="form-check">
<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSunday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionSunday">
Sunday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionMonday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionMonday">
Monday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionTuesday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionTuesday">
Tuesday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionWednesday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionWednesday">
Wednesday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionThursday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionThursday">
Thursday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekday" type="checkbox" value="1" id="sessionFriday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionFriday">
Friday
</label>
</div>
<div class="form-check">
<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSaturday" name="sessionDays" onclick="whatsChecked();">
<label class="form-check-label" for="sessionSaturday">
Saturday
</label>
</div>
</div>
<script type="text/javascript">
function whatsChecked() {
var foo = [];
var things = document.querySelectorAll('.sessionDays input[type="checkbox"]:checked');
for (var i = 0; i < things.length; i++) {
foo[i] = things[i].id;
}
for (var i = 0; i < things.length; i++) {
console.log(things[i].id);
}
}
</script>
</body>
</html>
随机的
选择会话日
选择您希望参加培训的具体日期
星期日
星期一
星期二
星期三
星期四
星期五
星期六
函数whatsChecked(){
var foo=[];
var things=document.querySelectorAll('.sessionDays input[type=“checkbox”]:checked');
for(var i=0;i
var selectedDays=document.querySelectorAll('.sessionDays input[type=“checkbox”]:checked');
var totalDays=selectedDays.length
Array.from(selectedDays).(function(item, index){
// code to display every checkbox (item)
});
var selectedDays=document.querySelectorAll('.sessionDays输入[type=“checkbox”]:选中'); var totalDays=selectedDays.length
Array.from(selectedDays).(function(item, index){
// code to display every checkbox (item)
});
您需要提供到目前为止的脚本,以便我们可以运行它并建议解决方案这里是JSFIDLE。(完整项目)您需要提供到目前为止的脚本,以便我们可以运行它并建议解决方案这里是JSFIDLE。(完整项目)所以您在InputOnClick事件中调用了WhatChecked。如果我需要在另一个div中显示复选框列表,该怎么办?只需将内容[I].id输出到div。如果需要更多帮助,请发布另一个问题。因此,您在input onclick事件中调用了WhatChecked。如果我需要在另一个div中显示复选框列表,该怎么办?只需将内容[I].id输出到div。如果需要更多帮助,请发布另一个问题。对不起。我不明白你想说什么。对不起。我不明白你想说什么。