单选按钮选择触发 JavaScript 函数

Question

我希望函数根据无线电输入 selected/checked 触发另一个函数。我的功能似乎不是 "seeing" 单选按钮检查事件。 我哪里做错了？这只是摘录，函数 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>

Answer 1

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

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

编辑添加：

您可能还想考虑绑定到 input[type="radio"] 的更改事件。您还需要将标签与相应的输入相关联，否则它们将没有任何价值。

更像这样的东西：

Javascript:

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

HTML:

<div class="grouped fields">
    Radio Button Select
    <div class="field">
        <div class="ui slider checkbox">
            <label><input type="radio" name="charttype" checked="checked" value="percent"> Amount by Year</label>
        </div>
    </div>
    <div class="field">
        <div class="ui slider checkbox">
            <label><input type="radio" name="charttype" value="amount"> Percent by Year</label>
        </div>
    </div>
</div>

JS Fiddle 示例：https://jsfiddle.net/eo0e4r63/

Answer 2

您还可以使用 .change 函数来检测单选按钮的选择何时发生更改。

   $("input:radio[name='charttype']").change(function(){
        if($(this).val() == "percent"){
            chartPercent();
        }   
        else if($(this).val() == "amount"){
            chartAmount();
        }
    });

JSFiddle : fiddle

单选按钮选择触发 JavaScript 函数

Radio Button Selection Fires JavaScript Function

javascript

jquery

radio-group

radio-button