When clicking on on the LI then automatically click on input radio

Question

When you click on li, I want input radio to be clicked.

However, I am getting an error from conole log saying:

Uncaught RangeError: Maximum call stack size exceeded

How to fix this?

Here the html code:

    <ul class="Method">
        <li class="shipping_today active">
           <label> Label 1 </label>
            <input value="shipping_today"  name="shipping" type="radio" />
        </li>
        <li class="shipping_next_month">
            <label> Label 2 </label>
            <input value="shipping_next_month"  name="shipping" type="radio" />
        </li>
    </ul>

Jquery:

$(".Method li").click(function() { 
    var thisLi = $(this);
    var radio = $(this).find("input:radio");

    if (radio.val() == "shipping_today") {
        $(".Method li").eq(1).removeClass("active");
        $(this).addClass("active");
    }

    if (radio.val() == "shipping_next_month") {
        $(".Method li").eq(-2).removeClass("active");
        $(this).addClass("active");
    }

    radio.click(); //problem here...
});

Is my jQuery code good? what can be improved?

thanks.

Answer 1

That's an infinite loop, because the click event you trigger on the radio button bubbles up to the <li> element and causes your handler to run recursively.

One solution would be to only relay the click event if its doesn't come from the radio button itself:

$(".Method li").click(function(event) {
    var thisLi = $(this);
    var radio = $(this).find("input:radio");

    // [...]

    if (radio[0] !== event.target) {
        radio.click();
    }
});

If you only want to check the radio button, however, relaying the event is not necessary. You can use prop() instead:

radio.prop("checked", true);