Change radio by Id attr to checked on select change

Question

Trying to set the radio inputs attribute to checked on select change.

Select HTML

<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
        <option value=""></option>      
        <option onclick="jsFunction()" value="slides_1">subject1</option>
        <option onclick="jsFunction()" value="slides_2">subject2</option>
        <option onclick="jsFunction()" value="slides_2">subject2</option>
</select>

jQuery

<script>
    function jsFunction(){
      var myselect = document.getElementById("selectOpt");
      var mySlide = myselect.options[myselect.selectedIndex].value;
      document.getElementById.mySlide.prop('checked', 'checked');
    }
</script>

Radio HTML

<input type="radio" name="slides" check="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>

Thanks -Hector

Answer 1

For JS, see the function below.

For the HTML part, remove the onclick="jsFunction()" field on the options, and changed the last option to "slides_3".

See the working code at:

JSFiddle

JS:

function jsFunction() {
    var selectedID = $('select#selectOpt').val();
    $('input[type=radio]').filter('#'+selectedID).prop('checked', true);
}

HTML(updated):

<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
        <option value=""></option>      
        <option value="slides_1">subject1</option>
        <option value="slides_2">subject2</option>
        <option value="slides_3">subject3</option>
</select>

<div>
    <input type="radio" name="slides" checked="checked" id="slides_1"/>
    <input type="radio" name="slides" id="slides_2"/>
    <input type="radio" name="slides" id="slides_3"/>
</div>

Answer 2

Import jquery:

<script type="text/javascript" src="you_jquery_file"></script>

You can download here: http://jquery.com/download/

Then change:

document.getElementById.mySlide.prop('checked', 'checked');

to:

$("#"+mySlide).prop('checked', 'checked');

Answer 3

For this particular problem, you don't need jQuery. Something like this will do:

function checkRadio(name, id) {
    var rGroup = document.getElementsByName(name);
    var theRadio = document.getElementById(id);
    // uncheck the checked ones
    for (var i=0;i<rGroup.length;i++) {
        rGroup[i].checked = false;   
    }
    // check the appropriate button
    theRadio.checked = true;
}

// bind custom event to your select list
var mylist = document.getElementById('some_select_list');
mylist.addEventListener('change', function() {
        var selected = this.options[this.selectedIndex].value;
        checkRadio('radio_group_name', selected);
    }, false);