jquery - Enter into text field and change the value of a radio button group

Question

I have a group of radio button and a text field. What I'am trying to do is when text is entered into the text field change which radio button is selected.

Example: if text is entered into "AddDisplayText", make "RoomLevel_1" checked.

<input name="AddDisplayText" type="text" class="input-field" id="AddDisplayText">


<label class="btn btn-primary form-check-label ">Name, text and logo<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_1" value="1"></span>
</label>

<label class="btn btn-primary form-check-label active">Name and logo<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_2" value="2"  checked></span>
</label>
                 
<label class="btn btn-primary form-check-label">Name only<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_3" value="3" ></span>
</label>
<label class="btn btn-primary form-check-label">Logo only<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_4" value="4" ></span>
</label>

The jquery I am trying to get working is:

$("#AddDisplayText").on("focusin",function(e){    
    $('#RoomLevel_1').attr('checked', 'checked');
});

Answer 1

For the event, I would use input as it covers paste, typing etc.. Then for checked, the second option can be boolean based on if the input box has text or not.

    $("#AddDisplayText").on("input",function(e){    
        $('#RoomLevel_1').attr('checked', ($(this).val() != ""));
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="AddDisplayText" type="text" class="input-field" id="AddDisplayText">


<label class="btn btn-primary form-check-label ">Name, text and logo<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_1" value="1"></span>
</label>

<label class="btn btn-primary form-check-label active">Name and logo<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_2" value="2"  checked></span>
</label>
                 
<label class="btn btn-primary form-check-label">Name only<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_3" value="3" ></span>
</label>
<label class="btn btn-primary form-check-label">Logo only<span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_4" value="4" ></span>
</label>