JQuery установить переключатель


134

Я пытаюсь установить переключатель. Я хочу установить его, используя значение или идентификатор.

Это то, что я пробовал.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol идентификатор переключателя.

Возможно небольшое редактирование в порядке.

Есть два комплекта радиобоксов: один с cols, а другой с рядами. Так что я вижу смысл в том, чтобы не использовать идентификаторы. Виноват. Итак, я имею в качестве примера:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

и

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

с идентификатором удален, и мне нужно установить правильный.


Ответы:


196

Ваш селектор ищет потомка input:radio[name=cols]элемента с идентификатором newcol(а также значением этой переменной).

Попробуйте вместо этого (так как вы выбираете по идентификатору в любом случае):

$('#' + newcol).prop('checked',true);

Вот демо: http://jsfiddle.net/jasper/n8CdM/1/

Также, начиная с jQuery 1.6, предпочтительный метод изменения свойства .prop(): http://api.jquery.com/prop


5
+1 для propпротив attr. attrустарел за свойства и больше не работает в jQuery 2.0))
gavenkoa

87

Я нашел ответ здесь:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

По сути, если вы хотите проверить одну радиокнопку, вы ДОЛЖНЫ передать значение в виде массива:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);

Привет, что ссылка не имеет предлагаемого содержания в нем. Почему вы, ребята, продолжаете отклонять мою правку, чтобы удалить ссылку. Он не содержит ничего, что касается вопроса.
Менека Ишан

@MenukaIshan, смысл в том, чтобы дать кредит. Ссылка доступна на web.archive.org, и парень, который написал ее впервые, и от которого я понял идею ответа, должен получить ее кредит. Не удаляйте ссылку, и если вы хотите увидеть исходный пост, скопируйте и вставьте ссылку (я не знаю, почему она идет на старую страницу вместо web.archive.org)
Chococroc

2
@Chococroc Вы не правильно настроили уценку вопроса. Я увидел версию веб-архива и правильно связал ее. После проверки он будет правильно ссылаться на сайт.
Менека Ишан

2
Похоже, что это должен быть принятый ответ, так как это решение, упомянутое в документах jQuery
plong0

15

В вашем селекторе вы, похоже, пытаетесь получить какой-то вложенный элемент вашей радиокнопки с заданным идентификатором. Если вы хотите проверить переключатель, вы должны выбрать этот переключатель в селекторе, а не что-то другое:

$('input:radio[name="cols"]').attr('checked', 'checked');

Это предполагает, что в вашей разметке есть следующий переключатель:

<input type="radio" name="cols" value="1" />

Если у вашей радиокнопки был идентификатор:

<input type="radio" name="cols" value="1" id="myradio" />

Вы можете напрямую использовать селектор идентификатора:

$('#myradio').attr('checked', 'checked');

Если есть несколько радиостанций с colsименем, тогда $('input:radio[name="cols"]').attr('checked', 'checked');выберет только последний. Он будет запускать код для каждого, но каждый раз, когда вы устанавливаете checkedсвойство, ранее установленный элемент сбрасывается. Вот демо: jsfiddle.net/jasper/n8CdM/2
Джаспер

@ Джаспер, да, это правда. Вот почему я предложил использовать селектор идентификатора.
Дарин Димитров

12

Вы можете попробовать следующий код:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked');

Это установит атрибут, проверенный для радио столбцов и значение, как указано.


1
...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.Источник: api.jquery.com/attr
Джаспер

10

Зачем вам нужно 'input:radio[name=cols]'. Не знаю ваш HTML, но при условии, что идентификаторы уникальны, вы можете просто сделать это.

$('#'+newcol).prop('checked', true);

6

Попробуй это:

$("#" + newcol).attr("checked", "checked");

У меня были проблемы attr("checked", true), поэтому я склонен использовать вышеупомянутое.

Кроме того, если у вас есть идентификатор, то вам не нужны эти другие вещи для выбора. Идентификатор уникален.


1
prop лучше, чем attr для таких вещей
RozzA

в jQuery 1.9+ отсутствует attr.
Mike_Laird

Вы правы, но в конечном итоге это зависит от вашей конкретной ситуации. Если ваш код будет всегда работать с jQuery 1.6+, то лучше использовать prop. Но если ваш код может работать на более старых версиях, то решение не так просто. Например, я поддерживаю плагин jQuery PickList, а мы поддерживаем jQuery 1.4+, поэтому простое использование prop - не вариант. Это открытый билет, поэтому, если у вас есть какие-нибудь изящные предложения, я буду рад их услышать; Я просто еще не успел провести исследование.
Медведь Ошри

Проблема в том, что даже если ваше решение может быть более обратно-совместимым, оно просто не работает в этом случае: выберите A, он получит новый checked="checked"атрибут, и браузер покажет его как отмеченный, затем выберите B, и произойдет то же самое. Теперь, когда вы снова выберите A, у него уже будет checked="checked"атрибут, и ничего не изменится. В качестве побочного эффекта этого B будет по-прежнему выбран, а не A.
Kyborek


2

Использование .filter()также работает, и является гибким для идентификатора, значения, имени:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(видно в этом блоге )


1
Я считаю, что это в равной степени правильный ответ, но он должен использовать метод prop (): $ ('input [name = "cols"]'). Filter ("[value = 'Site']"). Prop ('флажок ', правда);. Пользователь хочет установить "значение или идентификатор". Могут быть случаи, когда вы не хотите устанавливать значения идентификатора для каждой опции радио, поэтому полезно получать по имени и фильтровать по значению.
Зак Имбоден


0

Вы можете просто использовать:

$("input[name='cols']").click();

0

Выбранный ответ работает в этом случае.

Но вопрос был в том, чтобы найти элемент, основанный на радиогруппе и динамическом идентификаторе, и ответ также может оставить отображаемую радиокнопку без изменений.

Эта строка выбирает именно то, что было запрошено, а также показывает изменения на экране.

$('input:radio[name=cols][id='+ newcol +']').click();
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.