Being new to this world, I would greatly appreciate any assistance!
I am working with Bootstrap checkboxes and trying to print them using jQuery's window.print function.
However, the issue I am facing is that the array I create from the checkboxes displays the results one after another.
HTML:
<div class="form-check">
<input class="form-check-input" name="type" type="checkbox" value="Question1" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Question1
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="type" type="checkbox" value="Question2" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Question2
</label>
</div>
jQuery:
$("#results_message").text("The results are:");
$("button").on("click", function () {
var array = [];
$("input:checkbox[name=type]:checked").each(function () {
array.push($(this).val());
});
$("#results_after").text(array);
$('#results_after').printThis();
});
CSS:
#results_after {
color: green;
font-size: 24px;
font-weight: bold;
visibility: hidden;
}
#results_message {
visibility: hidden;
}
@media print {
#results_message,
#results_after {
visibility: visible;
}
}
As the results are displayed as an array with commas, I desire them to be listed vertically. I have considered using <br> tags to achieve this, but I'm unsure how to implement it.
Thank you in advance!