Функция выбора радиокнопки Функция JavaScript

Я хочу, чтобы функция вызывала другую функцию, основанную на том, какой радиовход выбран/установлен. Моя функция, похоже, не «видит» событие проверки переключателя. Что я делаю неправильно? Это только выдержка, функции chartAmount() и chartPercent() определены в оригиналах.Функция выбора радиокнопки Функция JavaScript

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

источник

2016-01-26 Hellyar

селекторы чувствительны к регистру. Вы должны использовать:

$('.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/

источник

2016-01-26 20:41:44

Вы можете также использовать функцию .Кнопкой для обнаружения всякий раз, когда изменяется выбор из переключателей.

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

JSFiddle: fiddle

источник

2016-01-26 20:47:09 stark

Функция выбора радиокнопки Функция JavaScript

ответ

Смежные вопросы