单选按钮选择触发JavaScript函数_Javascript_Jquery_Radio Button_Radio Group

单选按钮选择触发JavaScript函数

javascript jquery

单选按钮选择触发JavaScript函数,javascript,jquery,radio-button,radio-group,Javascript,Jquery,Radio Button,Radio Group,我希望该功能触发另一个选择/检查无线电输入的功能。我的功能似乎没有“看到”单选按钮检查事件我做错了什么？这只是一个摘录，chartAmount（）和chartPercent（）函数是在原始版本中定义的 <html> <head> <title>Connect Radio Sliders to JS</title> <script src="http://public.tableausoftware.com/javascrip

我希望该功能触发另一个选择/检查无线电输入的功能。我的功能似乎没有“看到”单选按钮检查事件我做错了什么？这只是一个摘录，chartAmount（）和chartPercent（）函数是在原始版本中定义的

<html>
<head>
    <title>Connect Radio Sliders to JS</title> 
    <script src="http://public.tableausoftware.com/javascripts/api/tableau_v8.debug.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="semantic.min.css">
</head>
<body>
    <h1>Radio Buttons fire JS Function</h1>
    <hr>
    <h3>Problem/Question</h3>
    <hr>
    <p>I want the selection of a radio button to trigger a javascript function.  My attempt does not work, what am I am doing wrong/missing?</p>
    <hr>
    <h3>Note:</h3>
    <p>The HTML and JS are extracted from a larger filet that include all approriate links to reuqired resources.  The two functions chartAmount() and chartPercent() are defined in the larger document.</p>
    <hr>
    <hr>
    <div class="ui form">
          <div class="grouped fields">
            <label>Radio Button Select</label>
                <div class="field">
                    <div class="ui slider checkbox">
                        <input type="radio" name="charttype" checked="checked" value="percent">
                        <label>Amount by Year</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui slider checkbox">
                        <input type="radio" name="charttype" value="amount">
                        <label>Percent by Year</label>
                    </div>
                </div>
            </div>
    </div>
    <script>
            $('.field').click(function() {
                if($("input[value='Amount']").is(':checked')) { chartAmount(); }
                if($("input[value='Percent']").is(':checked')) { chartPercent(); }
            })
    </script>
</body>


将收音机滑块连接到JS
单选按钮启动JS功能

问题

我希望选择一个单选按钮来触发javascript函数。我的尝试无效，我做错了什么/错过了什么

注:
HTML和JS是从一个更大的文件中提取出来的，该文件包含所有到重新编辑的资源的适当链接。两个函数chartAmount（）和chartPercent（）在较大的文档中定义


单选按钮选择
年度金额
年百分比
$（'.field'）。单击（函数（）{
如果（$（（“输入[value='Amount']”）是（':checked'）{chartmount（）；}
如果（$（（“输入[value='Percent']”）是（':checked'）{chartPercent（）；}
})

选择器区分大小写。你应使用：

$('.field').click(function() {
    if($("input[value='amount']").is(':checked')) { chartAmount(); }
    if($("input[value='percent']").is(':checked')) { chartPercent(); }
})

编辑以添加：

您可能还想考虑绑定到“更改代码事件”的代码>输入[类型=“无线电”] < /代码>。您还需要将标签绑定到相应的输入，否则它们不会提供任何值

更像这样：

Javascript:

$('input[type="radio"]').on('change',function() { 
    if($("input[value='amount']").is(':checked')) { chartAmount(); }
    if($("input[value='percent']").is(':checked')) { chartPercent(); }
})

HTML:


单选按钮选择
年度金额
年百分比

JS Fiddle示例：