How to package the process of clicking on a list item more compactly and correctly?

Question

Arrays

I greet all gurus, guress, gurus and those passing by!
I have a piece of crooked code in js, its essence is simple: when you click on the switch, its value is entered in a hidden input field:

$('#list > li input').click(function () {
    if (checkType('radio') == 1) {
        document.getElementById("field").value = "Значение 1"
    }
    if (checkType('radio') == 2) {
        document.getElementById("field").value = "Значение 2"
    }
    if (checkType('radio') == 3) {
        document.getElementById("field").value = "Значение 3"
    }
});

html piece:

<ul id="list">
    <li>
        <label>
            <input type="radio" name="radio" value="1">
            <span>Значение 1</span>
        </label>
    </li>
    <li>
        <label>
            <input type="radio" name="radio" value="2">
            <span>Значение 2</span>
        </label>
    </li>
    <li>
        <label>
            <input type="radio" name="radio" value="3">
            <span>Значение 3</span>
        </label>
    </li>
</ul>

<input type="hidden" id="field" value="">

The essence of the question: what is the best way to implement such js-code?

Answer 1

Answer 2

Maybe there are too many versions of jQuery stuffed in, so they conflict.

Answer 3

Most likely, jQuery or one of its plugins has been forgotten. I won’t tell you, because the telepaths dumped everything on vacation

Answer 4

Have you correctly connected the scripts to WP? Through registration of scripts?
If not by the method recommended by the WP developers, then the scripts can be connected in a different order. Because of this, the conflict.
Function for registration - wp_register_script( params );