Get checkbox checked value

Question

How do I retrieve checkboxes value individually for redirection of the page. I want to be able to redirect user after they've checked 2 checkboxes; then automatically redirect with it's value as a payload.

<script>
$("input:checkbox").on('click', function () {
    var $box = $(this);
    if ($box.is(":checked")) {
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        $(group).prop("checked", false);

        $box.prop("checked", true);
        var1 = $("input:checkbox[name='fooby[1][]']")
        var2 = $("input:checkbox[name='fooby[2][]']")

        if (($(var1).is(":checked")) & ($(var2).is(":checked"))) {
            window.location.href = url + 'var1=' + var1.value + '?var2=' + var2.value
        }
    } else {
        $box.prop("checked", false);
    }
});
</script>

I'm trying to redirect user with two payloads - I can't mix var2 with var1 either; it needs to be constant, their values should be sorted accordingly. When I do this.value it only gives me ONE value which is the last checked value. How can I get 2 different values?

This is var1 for instance

<center><input  style="display:block"type="checkbox" id="group1" class="radio" value="SINGLE_EXAM" name="fooby[1][]" />

and this is var2 for instance

<center><input type="checkbox" class="radio" value="Long Beach" id="group4" name="fooby[2][]" />    <label for="group4">dTLA</label>

I'm trying to get 2 different values; I tried adding everything to an array; it didnt work out since var1 could be var2 if I do that. How do I fix this?

Answer 1

First of all, you should have shown a working example using code snippet (where people could reproduce the issue) so that there would have been better clarity about what you are trying to achieve.

Now, the main problem you are facing is because you are using var1.value and var2.value . But those variables are JQ objects. So you should be using .val() .

Then, you should have selected only :checked checkboxes in var1 and var2 that would give you the correct value of selected option.

Btw, you are using url + 'var1=' + var1.value + '?var2=' + var2.value .

Do you mean to use url + '?var1=' + var1.value + '&var2=' + var2.value

As you have not shown a working example, I'm taking liberty to assume some HTML as shown below.

 $("input:checkbox").on('click', function () { var url = 'http://example.com/'; var $box = $(this); if ($box.is(":checked")) { var group = "input:checkbox[name='" + $box.attr("name") + "']"; $(group).prop("checked", false); $box.prop("checked", true); var1 = $("input:checkbox[name='fooby[1][]']:checked") var2 = $("input:checkbox[name='fooby[2][]']:checked") if (($(var1).is(":checked")) & ($(var2).is(":checked"))) { console.log(url + 'var1=' + var1.val() + '?var2=' + var2.val()); // window.location.href = url + 'var1=' + var1.value + '?var2=' + var2.value } } else { $box.prop("checked", false); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="group1" class="radio" value="SINGLE_EXAM" name="fooby[1][]" /> <label for="group1">Single Exam</label> <input type="checkbox" id="group2" class="radio" value="MULTIPLE_EXAM" name="fooby[1][]" /> <label for="group2">Multiple Exams</label> <input type="checkbox" id="group3" class="radio" value="NO_EXAM" name="fooby[1][]" /> <label for="group3">No Exam</label> <br> <input type="checkbox" class="radio" value="Long Beach" id="group4" name="fooby[2][]" /> <label for="group4">dTLA</label> <input type="checkbox" class="radio" value="Medium Beach" id="group5" name="fooby[2][]" /> <label for="group5">eTLA</label> <input type="checkbox" class="radio" value="Short Beach" id="group6" name="fooby[2][]" /> <label for="group6">fTLA</label>