Twitter Bootstrap onclick событие по кнопкам радио

Question

У меня есть радио-кнопка Twitter Bootstrap и я подключаю к нему событие onclick.Но как мне проверить, какая из сработавших кнопок?

Первой моей мыслью было просто проверить класс «активный», но это должно создать условие гонки (результат зависит от того, является ли событие Twitter Bootstrap илисначала обрабатывается мое собственное событие onclick).

Answer 1

Это действительно раздражает. То, что я в конечном итоге использовал, это:

Сначала создайте группу простых кнопок без атрибута data-toggle.

<div id="selector" class="btn-group">
    <button type="button" class="btn active">Day</button>
    <button type="button" class="btn">Week</button>
    <button type="button" class="btn">Month</button>
    <button type="button" class="btn">Year</button>
</div>

Затем напишите обработчик событий, который имитирует эффект переключателя, «активируя» нажатую и «деактивируя» все остальные кнопки. (РЕДАКТИРОВАТЬ: Интегрированная более чистая версия Ника из комментариев.)

$('#selector button').click(function() {
    $(this).addClass('active').siblings().removeClass('active');

    // TODO: insert whatever you want to do with $(this) here
});

Answer 2

Я вижу много сложных ответов, хотя это очень просто в Bootstrap 3:

Шаг 1: используйте официальный пример кода , чтобы создать группу переключателей, и присвойте контейнеру идентификатор:

<div id="myButtons" class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Шаг 2. Используйте этот обработчик jQuery:

$("#myButtons :input").change(function() {
    console.log(this); // points to the clicked input button
});

Попробуйте демоверсию скрипки

Answer 3

Я бы использовал событие изменения, а не щелчок вот так:

$('input[name="name-of-radio-group"]').change( function() {
  alert($(this).val())
})

Answer 4

Для Bootstrap 3 структура радио / группы кнопок по умолчанию:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

И вы можете выбрать активный, как это:

$('.btn-primary').on('click', function(){
    alert($(this).find('input').attr('id'));
}); 

Answer 5

Не используйте атрибут data-toggle, чтобы самостоятельно управлять поведением переключателя.Таким образом, это позволит избежать «состояния гонки»

мои коды:

шаблон группы кнопок (записан в .erb, встроенный ruby ​​для ruby ​​на рельсах):

<div class="btn-group" id="featuresFilter">
     <% _.each(features, function(feature) { %> <button class="btn btn-primary" data="<%= feature %>"><%= feature %></button> <% }); %>
</div>

и javascript:

onChangeFeatures = function(e){
        var el=e.target;
        $(el).button('toggle');

        var features=el.parentElement;
        var activeFeatures=$(features).find(".active");
        console.log(activeFeatures);
}

Функция onChangeFeatures будет запущена после нажатия кнопки.

Answer 6

Мне нужно было сделать то же самое для графика, где вы могли бы выбрать период данных, которые должны отображаться.

Поэтому я ввел CSS-класс 'btn-group-radio' и использовал следующую ненавязчивую однострочную строку javascript:

// application.js
$(document).ready(function() {
  $('.btn-group-radio .btn').click(function() {
    $(this).addClass('active').siblings('.btn').removeClass('active');
  });
});

А вот HTML-код:

<!-- some arbitrary view -->
<div class="btn-group btn-group-radio">
  <%= link_to '1W', charts_path('1W'), class: 'btn btn-default active', remote: true %>
  <%= link_to '1M', charts_path('1M'), class: 'btn btn-default', remote: true %>
  <%= link_to '3M', charts_path('3M'), class: 'btn btn-default', remote: true %>
  <%= link_to '6M', charts_path('6M'), class: 'btn btn-default', remote: true %>
  <%= link_to '1Y', charts_path('1Y'), class: 'btn btn-default', remote: true %>
  <%= link_to 'All', charts_path('all'), class: 'btn btn-default', remote: true %>
</div>

Answer 7

Я искал так много страниц: я нашел прекрасное решение. Проверьте это:

git link

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script>
        $(function() {
            $("#my_launch_today_chk").change(function() {
                var chk = $(this).prop('checked');
                if(chk == true){
                    console.log("On");
                }else{
                    console.log("OFF");
                }
            });
        });
    </script>
</head>
<body >

<input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small">
</body>
</html>

Answer 8

Рассматривая пример HTML для переключателей на странице начальной загрузки Twitter (http://twitter.github.com/bootstrap/base-css.html#forms),, вы можете видеть, что у каждого входа есть уникальный атрибут ID, то есть optionsRadios1 и optionsRadios2.

Соответствующий пример HTML-кода приведен здесь для полноты:

<div class="controls">
  <label class="radio">
    <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <label class="radio">
    <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">
    Option two can is something else and selecting it will deselect option one
  </label>
</div>

Таким образом, вы можете использовать событие щелчка jQuery, а затем использовать ссылку this для просмотра идентификатора HTML-элемента, который был нажат.

$('.controls').find('input').bind('click',function(event){
  if($(this).attr('id')==='optionsRadios1'){
    alert($(this).attr('id'));
  } else {
    //... call some other function
  }
});

Answer 9

Если ваш html похож на пример, то событие click создается над меткой, а не во входных данных, поэтому я использую следующий код: Пример HTML:

<div id="myButtons" class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>      
</div>

Javascript код для события:

$('#option1').parent().on("click", function () {
   alert("click fired"); 
});