JavaScript refactoring not working as expected

Question

I have this bit of repeated code that toggles 2 radio button from being checked in my $(document).ready() :

$(document).ready(function () {
    $("#New").click(function () {
        var toggleOn = $("#New");
        var toggleOff = $("#Used");
        var value = true;

        toggleOn.prop("checked", value);
        toggleOn.val(value);
        toggleOff.prop("checked", !value);
        toggleOff.val(!value);
    });

    $("#Used").click(function () {
        var toggleOn = $("#Used");
        var toggleOff = $("#New");
        var value = true;

        toggleOn.prop("checked", value);
        toggleOn.val(value);
        toggleOff.prop("checked", !value);
        toggleOff.val(!value);
    });
});

I didn't want to have the repeated code so I refactored it into a function:

$(document).ready(function () {
    $("#Used").on("click", toggleRadioButtons("Used", "New"));
    $("#New").on("click", toggleRadioButtons("New", "Used"));
});

function toggleRadioButtons(radioOne, radioTwo) {
    var toggleOn = $("#" + radioOne);
    var toggleOff = $("#" + radioTwo);
    var value = true;

    toggleOn.prop("checked", value);
    toggleOn.val(value);
    toggleOff.prop("checked", !value);
    toggleOff.val(!value);
}

So the problem is that with the refactored code the radio button is no longer properly unchecking the other radio button. I assuming it has to do with JavaScript closure but am not sure how that would apply since I am calling a function in it's outer scope.

Answer 1

If you give both radio buttons the same name , then only one will only be able to be selected at a time.

No need for jQuery at all.

 form { display: grid; grid-auto-flow: column; justify-content: center; grid-column-gap: 2em; }

 <form name="car"> <label>New <input type="radio" name="condition" value="new" /></label> <label>Used <input type="radio" name="condition" value="used" /></label> </form>

If you want them to be checkboxes, you can link them with a jQuery plugin. I called it syncCheckboxes and the code can be found below.

 (function($) { $.syncCheckboxes = function(...ids) { const $checkboxes = ids.map(id => $(id)); $checkboxes.forEach(function($checkbox) { $checkbox.on('click', function(e) { if ($(this).prop('checked')) { $checkboxes.forEach(function($curr) { $curr.prop('checked', $curr === $checkbox); }); } }) }); }; })(jQuery); $.syncCheckboxes('#New', '#Used');

 form { display: grid; grid-auto-flow: column; justify-content: center; grid-column-gap: 2em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="car"> <label>New <input type="checkbox" id="New" value="new" /></label> <label>Used <input type="checkbox" id="Used" value="used" /></label> </form>