JQuery 更改 href 的脚本不起作用

JQuery Script to change href not working

我想用单选选项更改 CSS 文件,但我就是无法使脚本工作。我插入了一些代码来测试它,但它也不起作用。我正在使用 Bootstrap 框架,它工作正常,CSS 文件也可以。

我的 HTML 文件:

<!DOCTYPE html>
<html>
<head>
    <link id="estilos" rel="stylesheet" type="text/css" href="./BootstrapColorSchemes/hefestus.css" >
    <title>Spider Magic</title>
</head>
<body>
<div class="container">
    <form class="form-horizontal" id="myForm">
        <div class="radio-inline">
            <label><input type="radio" name="optradio"
              value="./BootstrapColorSchemes/adventuetime1.css">AT1</label>
        </div>
        <div class="radio-inline">
            <label><input type="radio" name="optradio"
              value="./BootstrapColorSchemes/adventuretime2.css">AT2</label>
        </div>
        <div class="radio-inline">
            <label><input type="radio" name="optradio"
              value="./BootstrapColorSchemes/adventuretime3.css">AT3</label>
        </div>
    </form>
</div>
<div>This border should be red</div>
    <script src="./js/jquery-2.1.4.min.js"/>
    <script>
    $(document).ready(function(){
        console.log('i am ready');
        $("div").css("border", "3px solid red");
        $('#myForm input').on('change',function(){
            var selected=$('input[name="optradio"]:checked','#myForm').val();
            $('#estilos').attr('href',selected);
            alert(selected)
        });
    });</script>
    <script src="./js/bootstrap.min.js"/>
</body>
</html>

脚本标签不能用solidus自动关闭需要关闭标签:

<script src="./js/bootstrap.min.js"></script>

并更改 css 这应该有效:

$('.radio-inline').click(function() {
  $('#estilos').attr('href', $(this).val());
});