在一个函数中使用多个if语句？

Question

I want to add text to the URL whenever a certain checkbox is checked. I thought im just gonna add multiple if statements for every checkbox, however that did not work.

$("#button1").on("click", function(){
    url = "";
    if (auswahl_index1[0].checked) {
        url = page + option_0;
    }
    if (auswahl_index2[0].checked) {
        url = page + option_1;
    }
    window.location.href = url; 
});

 var auswahl_index1 = document.getElementById('yes1'); var auswahl_index2 = document.getElementById('no1'); var auswahl_index1 = document.getElementById('yes2'); var auswahl_index2 = document.getElementById('no2'); var page = "http://stackoverflow.com"; var url = page; $("#button1").on("click", function(){ url = ""; if (auswahl_index1[0].checked) { url = page + "test1"; } if (auswahl_index2[0].checked) { url = page + "test2"; } if (auswahl_index3[0].checked) { url = page + "test3"; } if (auswahl_index4[0].checked) { url = page + "test4"; } window.location.href = url; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="rdo1" id="yes1"/> <input type="radio" name="rdo1" id="no1"/> <input type="radio" name="rdo2" id="yes2"/> <input type="radio" name="rdo2" id="no2"/> <button type="button" id="button1">Button</button> 

I tryed to research what else to do and all I found is using "else if" for the second statement. Hovever that wouldnt work neither since that would mean that it would only activate if the first statement would be false, but both at the same time should be able to add to the url.

Sorry if this is a stupid question, im just really new to jquery and I couldnt find anything by googleing my problems. If you need more information about my problem, just ask please :)

Answer 1

I know in the past I came across issues with using .checked on checkboxes.

.prop seems to solve a lot of issues.

not 100% if its .prop('checked', 'checked') or .prop('checked') try either.

Also a note to mind: If they are checkboxes that means multiple of them can be checked. Use radio buttons instead.

var auswahl_index1 = document.getElementsByClassName('yes1');
var auswahl_index2 = document.getElementsByClassName('no1');


$("#button1").on("click", function(){
    url = "";
    if (auswahl_index1.prop('checked')) {
        url = page + option_0;
    }else if(auswahl_index2.prop('checked')) {
        url = page + option_1;
    } else {
       console.log('say something');
       return null;
    }
    window.location.href = url; 
});

Alternative function you could do is, add same class to each checkbox:

$('.class-added').change(function(){
    url = "";
    if (auswahl_index1.prop('checked')) {
        url = page + option_0;
    }
    else if (auswahl_index2.prop('checked') {
        url = page + option_1;
    }
    window.location.href = url;
});