按 Id 属性更改无线电以选中选择更改

Question

尝试将无线电输入属性设置为选中选择更改。

选择"网页"

<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>

收音机网页

<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"/>

谢谢 -赫克托

Answer 1

对于 JS，请参阅下面的函数。

对于 HTML 部分，删除选项上的 onclick="jsFunction（）" 字段，并将最后一个选项更改为"slides_3"。

请参阅工作代码：

JSFiddle

.JS：

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

网页（更新）：

<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>

您可以在此处下载： http://jquery.com/download/

然后更改：

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

自：

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

Answer 3

对于这个特定的问题，你不需要jQuery。像这样的事情可以：

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);