У меня есть 3 переключателя на моей веб-странице, как показано ниже:
<label for="theme-grey">
<input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
<input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
<input type="radio" id="theme-green" name="theme" value="green" />Green</label>Это должно сделать это, все это находится в документации, которая имеет очень похожий пример:
$("input[type='radio'][name='theme']").click(function() {
var value = $(this).val();
});
Я также должен отметить, что у вас есть несколько идентичных идентификаторов в этом фрагменте. Это неверный HTML. Используйте классы для группировки набора элементов, а не идентификаторов, так как они должны быть уникальными.
Чтобы определить, какой переключатель установлен, попробуйте следующее:
$('input:radio[name=theme]').click(function() {
var val = $('input:radio[name=theme]:checked').val();
});
Событие будет поймано для всех переключателей в группе, и значение выбранной кнопки будет помещено в val.
Обновление: после публикации я решил, что ответ Паоло выше, потому что он использует еще один обход DOM. Я разрешаю этот ответ, так как он показывает, как получить выбранный элемент таким образом, чтобы он был совместим с кросс-браузером.
$('input:radio[name=theme]:checked').val();
другой способ
$('input:radio[name=theme]').filter(":checked").val()
Это отлично работает для меня. Например, у вас есть две радиокнопки с тем же "именем", и вы просто хотели получить значение проверенного. Вы можете попробовать это.
$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
Следующий код используется для получения выбранного значения переключателя по имени
jQuery("input:radio[name=theme]:checked").val();
Спасибо Аднан
Я нашел этот вопрос, поскольку я изучал ошибку после того, как я обновил версию 1.7.2 jQuery до 1.8.2. Я добавляю свой ответ, потому что произошли изменения в jQuery 1.8 и выше, которые меняют способ ответа на этот вопрос.
С jQuery 1.8 они устарели псевдоселекторами, такими как: radio,: checkbox,: text.
Чтобы сделать это, просто замените :radio на [type=radio].
Итак, теперь ваш ответ будет для всех версий jQuery 1.8 и выше:
$("input[type=radio][name=theme]").click(function() {
var value = $(this).val();
});
Вы можете прочитать о изменении в 1.8 readme и билет для этого изменения, а также понять, почему на странице : селектор радио в разделе "Дополнительная информация".
Для тех, кто не хочет включать библиотеку, чтобы сделать что-то действительно простое:
document.querySelector('[name="theme"]:checked').value;
Для обзора производительности текущих ответов здесь проверить
Если вы хотите узнать значение выбранного переключателя по умолчанию перед событием клика, попробуйте следующее:
alert($("input:radio:checked").val()); Вы можете использовать функцию фильтра, если на странице есть несколько радиогрупп, как показано ниже
$('input[type=radio]').change(function(){
var value = $(this).filter(':checked' ).val();
alert(value);
});
Вот скрипт url
<input type="radio" name="ans3" value="help">
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">
<input type="radio" name="ans2" value="test">
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">
<script type="text/javascript">
var ans3 = jq("input[name='ans3']:checked").val()
var ans2 = jq("input[name='ans2']:checked").val()
</script>
Если вы хотите значение true/false, используйте это:
$("input:radio[name=theme]").is(":checked")
Что-то вроде этого может быть?
$("input:radio[name=theme]").click(function() {
...
});
Когда вы нажимаете на любой переключатель, я считаю, что он будет выбран, поэтому он будет вызываться для выбранного переключателя.
У вас есть несколько групп переключателей на одной странице, вы также можете попробовать это, чтобы получить значение переключателя:
$("input:radio[type=radio]").click(function() {
var value = $(this).val();
alert(value);
});
Ура!
также может использовать класс CSS для определения диапазона переключателей, а затем использовать следующее для определения значения
$('.radio_check:checked').val()
Это сработало для меня..
HTML:
<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>
Jquery:
$(".radioClass").each(function() {
if($(this).is(':checked'))
alert($(this).val());
});
Надеюсь, что это поможет.
$('input:radio[name=theme]').bind(
'click',
function(){
$(this).val();
});
Вы можете заметить, что использование селектора классов для получения значения элементов управления ASP.NET RadioButton всегда пуст, и вот почему.
Вы создаете элемент управления RadioButton в ASP.NET, как показано ниже:
<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />
И ASP.NET отображает следующий HTML для вашего RadioButton
<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>
Для ASP.NET мы не хотим использовать управляющее имя или идентификатор RadioButton, потому что они могут быть изменены по какой-либо причине из руки пользователя (изменение имени контейнера, имени формы, имени пользователя пользователя...), поскольку вы можно увидеть в коде выше.
Единственный оставшийся возможный способ получить значение RadioButton с помощью jQuery - использовать класс css, как указано в this, ответить на совершенно не связанный с ним вопрос, как показано ниже
$('span.radios input:radio').click(function() {
var value = $(this).val();
});