如何在 javascript 中显示多个复选框值
[英]How to Display multiple checkbox values in javascript
问题描述
I need to show the multiple selected checkbox values in bootstrap alert.
我需要在引导警报中显示多个选中的复选框值。 Now I Displaying only one checkbox value in alert.现在我在警报中只显示一个复选框值。
This HTML code contains the question and four options.此 HTML 代码包含问题和四个选项。 I need to display two options in bootstrap alert.I have facing much more difficulties with solving this problem.我需要在引导警报中显示两个选项。我在解决这个问题时遇到了更多的困难。
In this I need to display the correct answers banana and apple.thanks!在这我需要显示正确的答案香蕉和苹果。谢谢！
function validate() { // debugger; var b1 = document.getElementById("op1").checked; var b2 = document.getElementById("op2").checked; var b3 = document.getElementById("op3").checked; var b4 = document.getElementById("op4").checked; if ((b1 == false && b2 == false && b3 == false && b4 == false)) { // Alert message by displaying // error message $("#msg").html('<span class="alert alert-danger alert-dismissible fade show" id="alert1">'+ '<span class="red-alert-txt">Please select Atleast One option</span>' + '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); return false; } else { var checkboxvalue = $("input[name='checkboxdemo']:checked").val(); /*default slelcted value displayer*/ if (checkboxvalue) { $("#msg").html( '<span class="alert alert-primary alert-dismissible fade show" id="alert3">'+ '<strong>Selected:</strong>' + checkboxvalue +'</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); if (checkboxvalue == 'banana') { // Validation message for correct choice $("#ans").html( '<span class="alert alert-success alert-dismissible fade show" id="alert4">'+ 'Your Answer is correct: <b>;</b> <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'). } else { // Validation message for wrong choice $("#ans").html( '<span class="alert alert-warning alert-dismissible fade show" id="alert5">'+ 'Warning.:; You Have Made Wrong Choise : <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); } } } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width: initial-scale=1"> <.-- --> <link rel="stylesheet" href= "https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap:min.css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery:min.js"> </script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper:min.js"> </script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h4>select fruits from the following</h4> <form name="quiz" id="quiz" method="post"> <table> <tr> <td> <input type="checkbox" id="op1" name="checkboxdemo" value="banana"> banana <input type="checkbox" id="op2" name="checkboxdemo" value="brinjal"> brinjal <input type="checkbox" id="op3" name="checkboxdemo" value="apple"> apple <input type="checkbox" id="op4" name="checkboxdemo" value="tomato"> tomato </td> </tr> <tr> <td></td> <td> <input type="button" value="Finished!" onclick="return validate()"> <input type="reset" id="reset"> <div class="mt-3" id="msg"></div> <div class="mt-3" id="ans"></div> </td> </tr> </table> </form> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-03-16 09:22:33
You should loop through the selected value您应该遍历选定的值
let arr = [];
$("input[name='checkboxdemo']:checked").each(function(){
arr.push($(this).val());
});
function validate() { // debugger; var b1 = document.getElementById("op1").checked; var b2 = document.getElementById("op2").checked; var b3 = document.getElementById("op3").checked; var b4 = document.getElementById("op4").checked; if ((b1 == false && b2 == false && b3 == false && b4 == false)) { // Alert message by displaying // error message $("#msg").html('<span class="alert alert-danger alert-dismissible fade show" id="alert1">' + '<span class="red-alert-txt">Please select Atleast One option</span>' + '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>'); return false; } else { var checkboxvalue = $("input[name='checkboxdemo']:checked").val(); let arr = []; $("input[name='checkboxdemo']:checked").each(function(){ arr.push($(this).val()); }); if (arr) { $("#msg").html('<span class="alert alert-primary alert-dismissible fade show" id="alert3">' + '<strong>Selected:</strong>' + arr + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>'); if (checkboxvalue == 'banana') { // Validation message for correct choice $("#ans").html('<span class="alert alert-success alert-dismissible fade show" id="alert4">' + 'Your Answer is correct: <b>;</b> <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>'). } else { // Validation message for wrong choice $("#ans").html('<span class="alert alert-warning alert-dismissible fade show" id="alert5">' + 'Warning.:; You Have Made Wrong Choise : <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>'); } } } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width: initial-scale=1"> <.-- --> <link rel="stylesheet" href= "https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap:min.css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery:min.js"> </script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper:min.js"> </script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h4>select fruits from the following</h4> <form name="quiz" id="quiz" method="post"> <table> <tr> <td> <input type="checkbox" id="op1" name="checkboxdemo" value="banana"> banana <input type="checkbox" id="op2" name="checkboxdemo" value="brinjal"> brinjal <input type="checkbox" id="op3" name="checkboxdemo" value="apple"> apple <input type="checkbox" id="op4" name="checkboxdemo" value="tomato"> tomato </td> </tr> <tr> <td></td> <td> <input type="button" value="Finished!" onclick="return validate()"> <input type="reset" id="reset"> <div class="mt-3" id="msg"></div> <div class="mt-3" id="ans"></div> </td> </tr> </table> </form> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何从数组JavaScript显示复选框值 - How to display checkbox values from an array javascript
如何在 javascript 中使用循环获取多个复选框值？ - How to get multiple checkbox values with loop in javascript?
如何使用 javascript 在表格中显示单选和复选框值？ - How to display radio and checkbox values in table using javascript?
多个复选框值搜索javascript - Multiple checkbox values search javascript
使用javascript获取多个复选框值 - Get multiple checkbox values with javascript
如何显示 JavaScript 数组中的多个值 - How to display multiple values from JavaScript array
如何使用Javascript将多个选定的复选框值添加到数组中？ - How to add multiple selected checkbox values to an array using Javascript?
如何通过JavaScript将多个复选框值输入到隐藏的文本框中 - How to input multiple checkbox values into a hidden textbox via javascript
从 CheckBox 显示多个选定的选中值 - Display Multiple Selected Checked Values from a CheckBox
如何在javascript中获取复选框值 - how to get checkbox values in javascript
相关标签