blocks|key|437202|text|我会使用一个更改事件，而不是像这样的单击：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437203|$('input[name="name-of-radio-group"]').change(+function()+{
++alert($(this).val())
})|code-block|syntax|javascript|437204|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I would use a change event not a click like this:</p>

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


blocks|key|651660|text|不要使用数据切换属性，这样您就可以自己控制切换行为。因此，它将避免“竞争条件”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|651661|我的代码：|651662|按钮组模板(用.erb编写，用于ruby+on+rails的嵌入式ruby+)：|651663|<div+class="btn-group"+id="featuresFilter">
+++++<%25+_.each(features,+function(feature)+{+%25>+<button+class="btn+btn-primary"+data="<%25=+feature+%25>"><%25=+feature+%25></button>+<%25+});+%25>
</div>|code-block|syntax|javascript|651664|和javascript：|651665|onChangeFeatures+=+function(e){
++++++++var+el=e.target;
++++++++$(el).button('toggle');

++++++++var+features=el.parentElement;
++++++++var+activeFeatures=$(features).find(".active");
++++++++console.log(activeFeatures);
}|651666|点击按钮后，将触发onChangeFeatures函数。|651667|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Don't use data-toggle attribute so that you can control the toggle behavior by yourself. So it will avoid 'race-condition'</p>

<p>my codes:</p>

<p>button group template (written in .erb, embedded ruby for ruby on rails):</p>

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

<p>and javascript:</p>

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

        var features=el.parentElement;
        var activeFeatures=$(features).find(".active");
        console.log(activeFeatures);
}
</code></pre>

<p>onChangeFeatures function will be triggered once the button is clicked.</p>


blocks|key|651737|text|这是一个非常烦人的问题。我最终使用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|651738|首先，创建一组没有data-toggle属性的简单按钮。|offset|length|style|CODE|651739|<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>|code-block|syntax|javascript|651740|接下来，编写一个事件处理程序，通过“激活”单击的单选按钮并“停用”所有其他按钮来模拟单选按钮的效果。(编辑:评论中的集成Nick的更干净的版本。)|651741|$('#selector+button').click(function()+{
++++$(this).addClass('active').siblings().removeClass('active');

++++//+TODO:+insert+whatever+you+want+to+do+with+$(this)+here
});|651742|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1157545/nick^0|0|9|B|0|0|1O|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>This is a really annoying one. What I ended up using is this:</p>

<p>First, create a group of simple buttons with no <code>data-toggle</code> attribute.</p>

<pre><code>&lt;div id="selector" class="btn-group"&gt;
    &lt;button type="button" class="btn active"&gt;Day&lt;/button&gt;
    &lt;button type="button" class="btn"&gt;Week&lt;/button&gt;
    &lt;button type="button" class="btn"&gt;Month&lt;/button&gt;
    &lt;button type="button" class="btn"&gt;Year&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>Next, write an event handler that simulates the radio button effect by 'activating' the clicked one and 'deactivating' all other buttons. (EDIT: Integrated <a href="https://stackoverflow.com/users/1157545/nick">Nick</a>'s cleaner version from the comments.)</p>

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

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


blocks|key|437508|text|我需要对图表做同样的事情，您可以在图表中选择应该显示的数据的周期。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437509|因此，我引入了CSS类'btn-group-radio‘，并使用了下面这段不起眼的javascript代码：|437510|//+application.js
$(document).ready(function()+{
++$('.btn-group-radio+.btn').click(function()+{
++++$(this).addClass('active').siblings('.btn').removeClass('active');
++});
});|code-block|syntax|javascript|437511|下面是HTML：|437512|
<div+class="btn-group+btn-group-radio">
++<%25=+link_to+'1W',+charts_path('1W'),+class:+'btn+btn-default+active',+remote:+true+%25>
++<%25=+link_to+'1M',+charts_path('1M'),+class:+'btn+btn-default',+remote:+true+%25>
++<%25=+link_to+'3M',+charts_path('3M'),+class:+'btn+btn-default',+remote:+true+%25>
++<%25=+link_to+'6M',+charts_path('6M'),+class:+'btn+btn-default',+remote:+true+%25>
++<%25=+link_to+'1Y',+charts_path('1Y'),+class:+'btn+btn-default',+remote:+true+%25>
++<%25=+link_to+'All',+charts_path('all'),+class:+'btn+btn-default',+remote:+true+%25>
</div>|437513|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I needed to do the same thing for a chart where you could select the period of the data that should be displayed. </p>

<p>Therefore I introduced the CSS class 'btn-group-radio' and used the following unobtrusive javascript one-liner:</p>

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

<p>And here is the HTML:</p>

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


blocks|key|651955|text|我看到了很多复杂的答案，而这在Bootstrap+3中非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|651956|步骤1:使用the+official+example+code创建您的单选按钮组，并为容器提供id：|offset|length|651957|<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>|code-block|syntax|javascript|651958|第2步:使用此jQuery处理程序：|651959|$("#myButtons+:input").change(function()+{
++++console.log(this);+//+points+to+the+clicked+input+button
});|651960|Try+the+fiddle+demo|651961|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/3.4/javascript/#buttons-checkbox-radio|1|https://jsfiddle.net/9k8oc5pf/1/^0|0|6|P|0|0|0|0|0|0|J|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>I see a lot of complicated answers, while this is super simple in Bootstrap 3:</p>
<p>Step 1: Use <a href="https://getbootstrap.com/docs/3.4/javascript/#buttons-checkbox-radio" rel="nofollow noreferrer">the official example code</a> to create your radio button group, and give the container an id:</p>
<pre><code>&lt;div id=&quot;myButtons&quot; class=&quot;btn-group&quot; data-toggle=&quot;buttons&quot;&gt;
  &lt;label class=&quot;btn btn-primary active&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option1&quot; autocomplete=&quot;off&quot; checked&gt; Radio 1 (preselected)
  &lt;/label&gt;
  &lt;label class=&quot;btn btn-primary&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option2&quot; autocomplete=&quot;off&quot;&gt; Radio 2
  &lt;/label&gt;
  &lt;label class=&quot;btn btn-primary&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option3&quot; autocomplete=&quot;off&quot;&gt; Radio 3
  &lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>Step 2: Use this jQuery handler:</p>
<pre><code>$(&quot;#myButtons :input&quot;).change(function() {
    console.log(this); // points to the clicked input button
});
</code></pre>
<p><a href="https://jsfiddle.net/9k8oc5pf/1/" rel="nofollow noreferrer">Try the fiddle demo</a></p>


blocks|key|437626|text|我搜索了这么多页面:我找到了一个漂亮的解决方案。看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437627|git+link|offset|length|437628|<!DOCTYPE+html>
<html>
<head>

<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"+integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va%2BPmSTsz/K68vbdEjh4u"+crossorigin="anonymous">


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


<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>|code-block|syntax|javascript|437629|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/sajibremix/PHP-Section/blob/master/bootstrap_toogle_event_handle.php^0|0|0|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I searched so many pages: I found a beautiful solution. Check it out:</p>

<p><a href="https://github.com/sajibremix/PHP-Section/blob/master/bootstrap_toogle_event_handle.php" rel="nofollow noreferrer">git link</a></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

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

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

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

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

&lt;input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small"&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


<p>I have a Twitter Bootstrap buttons-radio and hook an onclick event to it. But how do I check which of the buttons that got triggered?</p>

<p>My first thought was to simply check for the class 'active', but this should create a race condition (result depends on whether the Twitter Bootstrap event or my own onclick event is handled first).</p>


Twitter Bootstrap onclick event on buttons-radio

容器

jQuery

我有一个Twitter Bootstrap buttons radio，并将一个onclick事件挂接到它。但是我如何检查哪些按钮被触发了呢？我的第一个想法是简单地检查“active”类，但这应该创建一个竞争条件(结果取决于首先处理Twitter Bootstrap事件还是我自己的onclick事件)。

问按钮上的Twitter Bootstrap onclick事件-单选
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按钮上的Twitter Bootstrap onclick事件-单选EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按钮上的Twitter Bootstrap onclick事件-单选
EN