[英]How to use jQuery to assign a class to only one radio button in a group when user clicks on it?
I have the following markup. 我有以下标记。 I would like to add class_A to
<p class="subitem-text">
(that holds the radio button and the label) when user clicks on the <input>
or <label>
. 当用户单击
<input>
或<label>
时,我想将class_A添加到<p class="subitem-text">
subitem <p class="subitem-text">
(包含单选按钮和标签)。
If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. 如果用户单击同一组中的其他单选按钮/标签,我想将class_A添加到此单选按钮的父段中,并从该组中包含单选按钮/标签的任何其他段落中删除class_A。 Effectively, in each
<li>
, only one <p class="subitem-text">
should have class_A added to it. 实际上,在每个
<li>
,仅应在其中添加一个<p class="subitem-text">
subitem <p class="subitem-text">
。
Is there a jQuery plug-in that does this? 是否有执行此操作的jQuery插件? Or is there a simple trick that can do this?
还是有一个简单的技巧可以做到这一点?
<ul>
<li>
<div class="myitem-wrapper" id="10">
<div class="myitem clearfix">
<span class="number">1</span>
<div class="item-text">Some text here </div>
</div>
<p class="subitem-text">
<input type="radio" name="10" value="15" id="99">
<label for="99">First subitem </label>
</p>
<p class="subitem-text">
<input type="radio" name="10" value="77" id="21">
<label for="21">Second subitem</label>
</p>
</div>
</li>
<li>
<div class="myitem-wrapper" id="11">
<div class="myitem clearfix">
<span class="number">2</span>
<div class="item-text">Some other text here ... </div>
</div>
<p class="subitem-text">
<input type="radio" name="11" value="32" id="201">
<label for="201">First subitem ... </label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="68" id="205">
<label for="205">Second subitem ...</label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="160" id="206">
<label for="206">Third subitem ...</label>
</p>
</div>
</li>
</ul>
DEMO: http://jsbin.com/ebaye3 演示: http : //jsbin.com/ebaye3
since you are putting all inside P you can use it! 由于您将所有内容都放入了P中,因此可以使用它!
$(function($) {
$('.subitem-text').click(function() {
$(this).parent().find('.subitem-text').removeClass('class_A');
if ( $(this).children(':radio').is(':checked') ) // for sake! ;-)
$(this).addClass('class_A');
});
//you can also write it like this:
$('.subitem-text :radio').click(function() {
$(this).parent().parent().children().removeClass('class_A');
if ( $(this).is(':checked') )
$(this).parent().addClass('class_A');
});
});
You can do something like this: 您可以执行以下操作:
// find all the radio inputs inside a subitem-text
$('.subitem-text input[type=radio]').bind('change', function() {
// find our parent LI
var $li = $(this).closest('li');
// remove any "class_A"
$li.find('.class_A').removeClass('class_A');
// find the subitem with the checked input and add "class_A"
$li.find('.subitem-text:has(input[checked])').addClass('class_A');
});
Like this: 像这样:
$(':radio').click(function() {
$(this).closest('ul').find('.subitem-text').removeClass('active');
$(this).closest('.subitem-text').addClass('active');
});
There is no set way to do this since it is dependent on the html in your document. 由于它取决于文档中的html,因此没有固定的方法来执行此操作。 The simplest way to do this is to bind to each of your radio input elements but you can also use event delegation and bind to the div.myitem-wrapper, li, parent ul or event body tag.
最简单的方法是绑定到每个单选输入元素,但您也可以使用事件委托并绑定到div.myitem-wrapper,li,parent ul或event body标签。
Just binding click handlers to each of the input elements we are interested in: 只需将点击处理程序绑定到我们感兴趣的每个输入元素上:
$("div.myitem-wrapper input[type=radio]").bind('change', function (event) {
$(event.target).is(':checked').closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
});
Same thing but using event delegation to reduce the number of handlers to one. 同样,但使用事件委托将处理程序的数量减少到一个。 This can really speed things up if you find that you are binding to a large number of elements.
如果发现绑定到大量元素,则可以真正加快速度。
$("#id_of_the_parent_UL").bind('change', function (event) {
var $target = $(event.target);
if ($target.is('input[type=radio]:checked')) {
$target.closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
}
});
Note that it is perfectly valid to say $(this)
instead of $(event.target)
but it will give different results if and when you start moving to event delegation. 请注意,用
$(this)
代替$(event.target)
是完全正确的,但是如果开始迁移到事件委托,它将给出不同的结果。 An added advantage is that it will be easier for you or the next guy to understand the code in in two months if you go with event.target . 另外一个好处是,如果您使用event.target ,那么您或下一个家伙将在两个月内更容易理解代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.