Как проверить переключатель с помощью jQuery?
Я пытаюсь проверить переключатель с помощью jQuery. Здесь мой код:
<form>
<div id='type'>
<input type='radio' id='radio_1' name='type' value='1' />
<input type='radio' id='radio_2' name='type' value='2' />
<input type='radio' id='radio_3' name='type' value='3' />
</div>
</form>
И JavaScript:
jQuery("#radio_1").attr('checked', true);
Не работает:
jQuery("input[value='1']").attr('checked', true);
Не работает:
jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);
Не работает:
Есть ли у вас другая идея? Что мне не хватает?
Ответы
Ответ 1
Для версий jQuery, равных или выше (> =) 1.6, используйте:
$("#radio_1").prop("checked", true);
Для версий до (<) 1.6 используйте:
$("#radio_1").attr('checked', 'checked');
Совет: Вы также можете впоследствии click()
или change()
на переключателе. Смотрите комментарии для получения дополнительной информации.
Ответ 2
Попробуйте это.
В этом примере я настраиваю его с его именем ввода и значением
$("input[name=background][value='some value']").prop("checked",true);
Полезно знать: в случае многословного значения он будет работать и из-за апострофов.
Ответ 3
Еще одна функция prop(), которая добавлена в jQuery 1.6, которая служит той же цели.
$("#radio_1").prop("checked", true);
Ответ 4
Короткая и удобная для чтения опция:
$("#radio_1").is(":checked")
Он возвращает true или false, поэтому вы можете использовать его в выражении "if".
Ответ 5
Попробуйте это.
Чтобы проверить радиоприемник, используя Значение, используйте это.
$('input[name=type][value=2]').attr('checked', true);
или
$('input[name=type][value=2]').attr('checked', 'checked');
или
$('input[name=type][value=2]').prop('checked', 'checked');
Чтобы проверить радиоприемник, используя ID, используйте это.
$('#radio_1').attr('checked','checked');
или
$('#radio_1').prop('checked','checked');
Ответ 6
Способ $.prop
лучше:
$(document).ready(function () {
$("#radio_1").prop('checked', true);
});
и вы можете протестировать его следующим образом:
$(document).ready(function () {
$("#radio_1, #radio_2", "#radio_3").change(function () {
if ($("#radio_1").is(":checked")) {
$('#div1').show();
}
else if ($("#radio_2").is(":checked")) {
$('#div2').show();
}
else
$('#div3').show();
});
});
Ответ 7
Попробуйте следующее:
$("input[name=type]").val(['1']);
http://jsfiddle.net/nwo706xw/
Ответ 8
Вы должны сделать
jQuery("#radio_1").attr('checked', 'checked');
Что атрибут HTML
Ответ 9
Если свойство name
не работает, не забывайте, что id
все еще существует. Этот ответ предназначен для людей, которые хотят настроить таргетинг на id
здесь, как вы это делаете.
$('input[id=element_id][value=element_value]').prop("checked",true);
Поскольку свойство name
не работает для меня. Убедитесь, что вы не окружаете id
и name
двойными/одинарными кавычками.
Ура!
Ответ 10
$("input[name=inputname]:radio").click(function() {
if($(this).attr("value")=="yes") {
$(".inputclassname").show();
}
if($(this).attr("value")=="no") {
$(".inputclassname").hide();
}
});
Ответ 11
Да, это сработало для меня, как способ:
$("#radio_1").attr('checked', 'checked');
Ответ 12
Мы должны сказать, что это кнопка radio
. Поэтому попробуйте со следующим кодом.
$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);
Ответ 13
На всякий случай, когда кто-то пытается достичь этого, используя пользовательский интерфейс jQuery, вам также нужно обновить объект флажка пользовательского интерфейса, чтобы отразить обновленное значение:
$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
Ответ 14
Попробуйте это
var isChecked = $("#radio_1")[0].checked;
Ответ 15
Получить значение:
$("[name='type'][checked]").attr("value");
Установленное значение:
$(this).attr({"checked":true}).prop({"checked":true});
Нажмите кнопку Radio, чтобы добавить attr:
$("[name='type']").click(function(){
$("[name='type']").removeAttr("checked");
$(this).attr({"checked":true}).prop({"checked":true});
});
Ответ 16
Попробуйте это с примером
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>
<script>
$(document).ready(function () {
$('#myForm').on('click', function () {
var value = $("[name=radio]:checked").val();
alert(value);
})
});
</script>
Ответ 17
Попробуйте это
$(document).ready(function(){
$("input[name='type']:radio").change(function(){
if($(this).val() == '1')
{
// do something
}
else if($(this).val() == '2')
{
// do something
}
else if($(this).val() == '3')
{
// do something
}
});
});
Ответ 18
У меня есть некоторый связанный пример, который нужно улучшить, как насчет того, если я хочу добавить новое условие, скажем, если я хочу, чтобы цветовая схема была скрыта после того, как я нажму на значение статуса проекта, за исключением асфальтоукладчиков и тротуарной плитки.
Пример здесь:
$(function () {
$('#CostAnalysis input[type=radio]').click(function () {
var value = $(this).val();
if (value == "Supply & Lay") {
$('#ul-suplay').empty();
$('#ul-suplay').append('<fieldset data-role="controlgroup"> \
http://jsfiddle.net/m7hg2p94/4/
Ответ 19
Я использую этот код:
Прошу прощения за английский.
var $j = jQuery.noConflict();
$j(function() {
// add handler
$j('#radio-1, #radio-2').click(function(){
// find all checked and cancel checked
$j('input:radio:checked').prop('checked', false);
// this radio add cheked
$j(this).prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
<legend>Radio buttons</legend>
<label>
<input type="radio" id="radio-1" checked>
Option one is this and that—be sure to include why it great
</label>
<br>
<label>
<input type="radio" id="radio-2">
Option two can be something else
</label>
</fieldset>
Ответ 20
попробуйте это
$("input:checked", "#radioButton").val()
если флажок возвращен True
если не проверено, возвращает False
jQuery v1.10.1
Ответ 21
У меня есть аналогичная проблема, простое решение состоит в том, чтобы просто использовать:
.click()
Любое другое решение будет работать, если вы обновите радио после вызова функции.
Ответ 22
function rbcitiSelction(e) {
debugger
$('#trpersonalemail').hide();
$('#trcitiemail').show();
}
function rbpersSelction(e) {
var personalEmail = $(e).val();
$('#trpersonalemail').show();
$('#trcitiemail').hide();
}
$(function() {
$("#citiEmail").prop("checked", true)
});
Ответ 23
Удивительно, но самый популярный и принятый ответ игнорирует запуск соответствующего события, несмотря на комментарии. Убедитесь, что вы вызываете .change()
, иначе все привязки "при изменении" будут игнорировать это событие.
$("#radio_1").prop("checked", true).change();
Ответ 24
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
Ответ 25
Попробуйте следующее:
$(document).ready(function(){
$("#Id").prop("checked", true).checkboxradio('refresh');
});
Ответ 26
Несколько раз выше решения не работают, вы можете попробовать:
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));
Другой способ, которым вы можете попробовать:
jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);
Ответ 27
attr
принимает две строки.
Правильный путь:
jQuery("#radio_1").attr('checked', 'true');
Ответ 28
attr принимает две строки.
Правильный путь:
jQuery("#radio_1").attr('checked', 'true');
Ответ 29
Кроме того, вы можете проверить, проверен ли элемент:
if ($('.myCheckbox').attr('checked'))
{
//do others stuff
}
else
{
//do others stuff
}
Вы можете проверить наличие непроверенного элемента:
$('.myCheckbox').attr('checked',true) //Standards way
Вы также можете снять этот флажок:
$('.myCheckbox').removeAttr('checked')
Вы можете проверить радио кнопку:
Для версий jQuery, равных или выше (> =) 1.6, используйте:
$("#radio_1").prop("checked", true);
Для версий до (<) 1.6 используйте:
$("#radio_1").attr('checked', 'checked');
Ответ 30
Если вы не хотите включать большую библиотеку, такую как jQuery, для чего-то такого простого, вот альтернативное решение с использованием встроенных методов DOM:
// Check checkbox by id:
document.querySelector('#radio_1').checked = true;
// Check checkbox by value:
document.querySelector('#type > [value="1"]').checked = true;
// If this is the only input with a value of 1 on the page, you can leave out the #type >
document.querySelector('[value="1"]').checked = true;
<form>
<div id='type'>
<input type='radio' id='radio_1' name='type' value='1' />
<input type='radio' id='radio_2' name='type' value='2' />
<input type='radio' id='radio_3' name='type' value='3' />
</div>
</form>