JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
    <li class="multiplechoice_answer True">
        <input class="checkbox" type="checkbox" name="checkbox"/>Answer 1</li>
    <li class="multiplechoice_answer False">
        <input class="checkbox" type="checkbox" name="checkbox"/>Answer 1</li>
    <li class="multiplechoice_answer False">
        <input class="checkbox" type="checkbox" name="checkbox"/>Answer 1</li>
    <li class="multiplechoice_answer True">
        <input class="checkbox" type="checkbox" name="checkbox"/>Answer 1</li>
</ul>

CSS

.box {
    position:relative;
    width: 300px;
    height: 400px;
    padding: 10px;
    text-align:center;
    border: solid 1px black;
}
.box::before {
    content:"";
    position:absolute;
    left:10px;
    ;
    top:10px;
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url(http://icons.iconarchive.com/icons/visualpharm/ios7v2/256/Tools-Hammer-icon.png);
    background-size: 30px 30px;
}

JavaScript

$('.multiplesubmit').click(function () {
    var correctAnswers = $(this).next('ul').children('li').filter(function () {
        console.log($(this).find('input[type="checkbox"]:checked'))
        return $(this).hasClass('True') && $(this).find('input[type="checkbox"]:checked').length>0;
    });
    if (correctAnswers.length>0) {
        alert('found')
    }
});