Вызов onclick в списке радиокнопок с использованием JavaScript - PullRequest
Новая
       15

Вызов onclick в списке радиокнопок с использованием JavaScript

46 голосов
/ 12 декабря 2008

Как я могу вызвать onclick в списке радиокнопок, используя JavaScript?

Ответы [ 6 ]

37 голосов
/ 12 декабря 2008

Как вы генерируете список переключателей? Если вы просто используете HTML: 

<input type="radio" onclick="alert('hello');"/>

Если вы генерируете их через что-то вроде ASP.NET, вы можете добавить это как атрибут к каждому элементу в списке. Вы можете запустить это после заполнения списка или встроить его, если вы строите свой список один за другим: 

foreach(ListItem RadioButton in RadioButtons){
    RadioButton.Attributes.Add("onclick", "alert('hello');");
}

Подробнее: http://www.w3schools.com/jsref/event_onclick.asp

21 голосов
/ 23 ноября 2011

Чтобы вызвать событие onClick для радиокнопки, вызовите метод click() для элемента DOM: 

document.getElementById("radioButton").click()

используя jquery: 

$("#radioButton").click()

AngularJs: 

angular.element('#radioButton').trigger('click')
15 голосов
/ 12 декабря 2008

Я согласен с @annakata, что этот вопрос нуждается в дополнительном разъяснении, но вот очень, очень простой пример того, как настроить обработчик событий onclick для переключателей: 

<html>
 <head>
  <script type="text/javascript">
    window.onload = function() {

        var ex1 = document.getElementById('example1');
        var ex2 = document.getElementById('example2');
        var ex3 = document.getElementById('example3');

        ex1.onclick = handler;
        ex2.onclick = handler;
        ex3.onclick = handler;

    }

    function handler() {
        alert('clicked');
    }
  </script>
 </head>
 <body>
  <input type="radio" name="example1" id="example1" value="Example 1" />
  <label for="example1">Example 1</label>
  <input type="radio" name="example2" id="example2" value="Example 2" />
  <label for="example1">Example 2</label>
  <input type="radio" name="example3" id="example3" value="Example 3" />
  <label for="example1">Example 3</label>
 </body>
</html>
7 голосов
/ 18 декабря 2008

Проблема здесь в том, что рендеринг RadioButtonList оборачивает отдельные переключатели (ListItems) в теги span, и даже когда вы назначаете обработчик событий на стороне клиента непосредственно элементу списка, используя атрибуты, он назначает событие для span. Присвоение события RadioButtonList назначает его таблице, в которой оно отображается.

Хитрость в том, чтобы добавить ListItems на страницу aspx, а не из кода позади. Затем вы можете назначить функцию JavaScript свойству onClick. Это сообщение в блоге; присоединение обработчика событий на стороне клиента к списку переключателей от Juri Strumpflohner объясняет все это.

Это работает только в том случае, если вы заранее знаете ListItems и не помогает, когда элементы в RadioButtonList необходимо динамически добавлять с помощью кода, приведенного ниже.

3 голосов
/ 20 мая 2017

попробуйте следующее решение

HTML: 

<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>


JS: 

$(document).ready(function () {
       $('.radio').click(function () {
           document.getElementById('price').innerHTML = $(this).val();
       });

   });
0 голосов
/ 23 марта 2019 

Hi, I think all of the above might work. In case what you need is simple, I used:

<body>
    <div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
        <input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
        <input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
    </div>

<script>
function checkRadio(name) {
    if(name == "one"){
    console.log("Choice: ", name);
        document.getElementById("one-variable-equations").checked = true;
        document.getElementById("multiple-variable-equations").checked = false;

    } else if (name == "multiple"){
        console.log("Choice: ", name);
        document.getElementById("multiple-variable-equations").checked = true;
        document.getElementById("one-variable-equations").checked = false;
    }
}
</script>
</body>
...