dimanche 4 mars 2018

jQuery - access the nested path of the input elements

HTML:

<div id="quiz">
<div id="question">
    <p id="quiz-txt">Your Name is:</p>
    <ul id="quiz-opt">
        <div id="ans">
            <input type="checkbox" id="Bob" value="Bob" class="options">
            <label for="Bob">Bob</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="David" value="David" class="options">
            <label for="David">David</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="Jack" value="Jack" class="options">
            <label for="Jack">Jack</label>
        </div>
    </ul>
</div>
.
.
.
.
<div id="question">
    <p id="quiz-txt">This is the final question.</p>
    <ul id="quiz-opt">
        <div id="ans">
            <input type="checkbox" id="Yes" value="Yes" class="options">
            <label for="Yes">Yes</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="No" value="No" class="options">
            <label for="No">No</label>
        </div>
    </ul>
</div>

There are about 10 of these divs (questions) which are created on the go (getting an array from the server).

So, my question is how I can get the values of checkboxes that are checked?

Here is what I tried in my JS:

$('#quiz').children('#question').children('#quiz-opt').children('#ans').children('.options:checked').each(function () {
        console.log($(this).val());
    });




Aucun commentaire:

Enregistrer un commentaire