用于更改 href 的 JQuery 脚本不起作用答案

【问题标题】：JQuery Script to change href not working用于更改 href 的 JQuery 脚本不起作用
【发布时间】：2015-11-09 11:37:05
【问题描述】：

我想使用单选选项更改 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>

【问题讨论】：

标签： jquery css forms twitter-bootstrap radio-button

【解决方案1】：

脚本标签不能用solidus自闭合需要一个闭合标签：

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

并且要更改 css 这应该可以工作：

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

【讨论】：

你没有检查它是否被“检查”
我会将事件处理程序编写为：$('#myForm').on('change', 'input[type=radio][name="optradio"]',function () { 以利用无线电类型和表单范围，但真正的问题是您注意到脚本标记关闭。