Управляйте значением Raio с jQuery

Question

Вот это HTML:

<li class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible gsurvey-survey-field' id='field_1_213'>
    <label class='gfield_label'>MOOD</label>
    <div class='ginput_container ginput_container_likert'>
        <table class='gsurvey-likert' id='input_1_213'>
            <thead>
                <tr>
                    <th class='gsurvey-likert-row-label' scope='col'></th>
                    <th class='gsurvey-likert-choice-label' scope='col'>RECOMMEND</th>
                    <th class='gsurvey-likert-choice-label' scope='col'>NOT RECOMMEND</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='gsurvey-likert-row-label' data-label=''>APPETITE</td>
                    <td class='gsurvey-likert-choice' data-label='RECOMMEND'><input id='choice_1_213_1_1' name='input_213.1' type='radio' value='glikertrowc23a480e:glikertcol213e396906a'></td>
                    <td class='gsurvey-likert-choice' data-label='NOT RECOMMEND'><input id='choice_1_213_1_2' name='input_213.1' type='radio' value='glikertrowc23a480e:glikertcol213ef7a9a10'></td>
                </tr>
                <tr>
                    <td class='gsurvey-likert-row-label' data-label=''>SOCIAL</td>
                    <td class='gsurvey-likert-choice' data-label='RECOMMEND'><input id='choice_1_213_2_1' name='input_213.2' type='radio' value='glikertrow2129f677:glikertcol213e396906a'></td>
                    <td class='gsurvey-likert-choice' data-label='NOT RECOMMEND'><input id='choice_1_213_2_2' name='input_213.2' type='radio' value='glikertrow2129f677:glikertcol213ef7a9a10'></td>
                </tr>
                <tr>
                    <td class='gsurvey-likert-row-label' data-label=''>PASSION</td>
                    <td class='gsurvey-likert-choice' data-label='RECOMMEND'><input id='choice_1_213_3_1' name='input_213.3' type='radio' value='glikertrow947f470d:glikertcol213e396906a'></td>
                    <td class='gsurvey-likert-choice' data-label='NOT RECOMMEND'><input id='choice_1_213_3_2' name='input_213.3' type='radio' value='glikertrow947f470d:glikertcol213ef7a9a10'></td>
                </tr>
                <tr>
                    <td class='gsurvey-likert-row-label' data-label=''>RELIEF</td>
                    <td class='gsurvey-likert-choice' data-label='RECOMMEND'><input id='choice_1_213_4_1' name='input_213.4' type='radio' value='glikertrow6ac41353:glikertcol213e396906a'></td>
                    <td class='gsurvey-likert-choice' data-label='NOT RECOMMEND'><input id='choice_1_213_4_2' name='input_213.4' type='radio' value='glikertrow6ac41353:glikertcol213ef7a9a10'></td>
                </tr>
                <tr>
                    <td class='gsurvey-likert-row-label' data-label=''>FLO</td>
                    <td class='gsurvey-likert-choice' data-label='RECOMMEND'><input id='choice_1_213_5_1' name='input_213.5' type='radio' value='glikertrow7b8e0a41:glikertcol213e396906a'></td>
                    <td class='gsurvey-likert-choice' data-label='NOT RECOMMEND'><input id='choice_1_213_5_2' name='input_213.5' type='radio' value='glikertrow7b8e0a41:glikertcol213ef7a9a10'></td>
                </tr>
            </tbody>
        </table>
    </div>
</li>

Я хочу манипулировать значением ввода по умолчанию или нет / пусто и обновить родительский класс. Кто-то должен иметь возможность проверить вариант из ряда, и он должен иметь возможность снять все варианты (2 варианта подряд), если они передумают и не хотят ничего выбирать. При нажатии на входе в настоящее время выбирается опция, я хочу, чтобы опция отменяла выбор при повторном нажатии. Чтобы соответствовать существующему jQuery, я проверил форму и посмотрю, если я изменю значение ввода на пустое, оно будет отменено и изменено на значение по умолчанию, оно выбрано.

Текущий код позволяет выбор любого из 2 вариантов, но их нельзя отменить.

Вот что я пробовал:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var click = $('.gsurvey-likert-choice');
        var input = click.find('input:radio');
        var inputVal = input.val();
        input.attr('data-default', inputVal);
        input.attr('data-alt');

        click.on("click", function() {
        var input = $(this).find('input:radio');    
        var def = input.attr('data-default');
        var alt = input.attr('data-alt');
        (input.val() == def) ? input.val(alt) : input.val(def);
        $(this).toggleClass('none-selected');
        });
    });

</script>

Answer 1

Для моего понимания вам не нужно использовать классы. В любом случае, одним из решений является функция JS setTimeout.

        $("input[type='radio']").mouseup(
            function (e) {
                if ($(this).is(':checked')) {
                    var item = $(this);
                    setTimeout(
                        function () {
                            item.prop('checked', false);
                        },
                        200
                    );
                }
            }
        );

Подробнее о функции setTimeout можно узнать здесь: https://javascript.info/settimeout-setinterval