[英]Get selected radio button on selected in function in jQuery
I have the following markup:我有以下标记:
<div class="secondary-filter" onclick="searchByFilter()">
<ul class="secondary-filter__list">
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
<label for="secondaryFilter-all">All</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>
</li>
<li class="secondary-filter__list-item">
<input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
<label for="secondaryFilter-unquoted">Pending</label>
</li>
</ul>
</div>
How can I obtained the label of the checked radio button in the following function?如何获得下面function中选中单选按钮的label?
function searchByFilter() {
var x = $("input[name='secondaryFilter']").find('input:checked');
console.log(x.val());
}
I'm trying this.. but it's not working.我正在尝试这个..但它不起作用。 Please help.
请帮忙。
Your $("input[name='secondaryFilter']")
creates a jQuery object if <input>
elements, but .find
only searches through descendants - the input elements don't have any descendants, rather you want to get the matching <input>
in the current collection.您的
$("input[name='secondaryFilter']")
创建一个 jQuery object if <input>
元素,但.find
仅搜索后代- 输入元素没有任何后代,而是您想要获得匹配的<input>
在当前集合中。
You should also attach the event listener using Javascript rather than in an HTML attribute.您还应该使用 Javascript 而不是在 HTML 属性中附加事件侦听器。 By listening for
change
events, you'll have events that only fire when one of the inputs change, rather than when anywhere in the container is clicked.通过侦听
change
事件,您将获得仅在其中一个输入更改时触发的事件,而不是在单击容器中的任何位置时触发的事件。
Also, probably best to have the label
next to each input have its for
attribute match the id
of the input - that way, when clicking the label, the input will be checked - eg, change此外,最好让每个输入旁边的
label
的for
属性与输入的id
匹配 - 这样,当单击 label 时,将检查输入 - 例如,更改
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>
to至
<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
^^^^^^
While you could use .filter
instead, to find the element in the current jQuery object matching the condition:虽然您可以使用
.filter
代替,但要在当前 jQuery object 中找到符合条件的元素:
$("input[name='secondaryFilter']").on('change', function() { var x = $("input[name='secondaryFilter']").filter('input:checked'); console.log(x.val()); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>
It would be easier to just put the :checked
into the first selector string:将
:checked
放入第一个选择器字符串会更容易:
const checkedInput = $("input[name='secondaryFilter']:checked");
$("input[name='secondaryFilter']").on('change', function() { var x = $("input[name='secondaryFilter']:checked"); console.log(x.val()); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>
To make this work attach a change
event handler directly to the radio
elements.为了完成这项工作,将
change
事件处理程序直接附加到radio
元素。 Then you can get $(this).val()
from it when the event occurs.然后你可以在事件发生时从中获取
$(this).val()
。 You can also use next().text()
to get the value shown in the label
, although given that the radio value and innerText of the label are the same, this seems a little redundant.您也可以使用
next().text()
来获取 label 中显示的值,尽管鉴于label
的 radio 值和 innerText 相同,这似乎有点多余。
Also note that the for
attributes of the label
elements need to match the id
of the targeted radio
, so I've fixed the HTML there too.另请注意,
label
元素的for
属性需要与目标radio
的id
匹配,因此我也在那里修复了 HTML 。
$('.secondary-filter:radio').on('change', function() { var $radio = $(this); var $label = $radio.next(); console.log(`value: ${$radio.val()}, label: ${$label.text()}`); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>
Use利用
input[name='secondaryFilter']:checked" ,'.secondary-filter'
It will check for checked radio button inside the class of the div它将检查 div 的 class 内的选中单选按钮
function searchByFilter() { var x = $("input[name='secondaryFilter']:checked",'.secondary-filter') console.log(x.val()) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter" onclick="searchByFilter()"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-quoted">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-unquoted">Pending</label> </li> </ul> </div>
var x = $('input[name=secondaryFilter]:checked').val() var x = $('input[name=secondaryFilter]:checked').val()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.