Вопрос по javascript, html – Как очистить радио-кнопку в Javascript?

44

У меня есть переключатель с именем «Выбрать» с параметрами «да» и «нет». Если я выберу любую из опций и нажму кнопку с надписью «очистить», мне нужно очистить выбранную опцию, используя javascript. Как я могу это сделать?

Ваш Ответ

8   ответов
0

если идентификаторы переключателей «мужской» и «женский», сброс значения можно выполнить с помощью jquery.

$('input[id=male]').attr('checked',false);
$('input[id=female]').attr('checked',false);
10

Это должно работать. Убедитесь, что каждая кнопка имеет уникальный идентификатор. (Замените Choose_Yes и Choose_No идентификаторами ваших двух переключателей)

document.getElementById("Choose_Yes").checked = false;
document.getElementById("Choose_No").checked = false;

Пример того, как должны быть названы переключатели:

<input type="radio" name="Choose" id="Choose_Yes" value="1" /> Yes
<input type="radio" name="Choose" id="Choose_No" value="2" /> No
Вам нужно изменить его на отдельные идентификаторы. Вы не должны иметь более одного идентичного идентификатора на странице. Вам нужно использовать одно и то же имя, чтобы сделать его группой переключателей, но идентификатор должен быть уникальным. Shawn Steward
Хотя jQuery великолепен, его не нужно использовать для каждого кусочка JavaScript. В этом случае это просто лишние затраты на то, что довольно просто сделать в простом JavaScript. Shawn Steward
Как говорит Дэвид, вы можете получить доступ поназвание, такЯ бы не требуется для этой функции. Кроме того, я подозреваю опечатку - вашзначение одинаково для обеих кнопок. NVRAM
@ i2ijeya Я бы использовал такую ​​библиотеку, какjquery.com где я мог бы выбрать по классу, если бы я хотел выбрать больше переключателей одновременно. Вы также можете использовать document.getElementsByName («Выбрать»). David Andersson
Если у меня есть один общий идентификатор, то как я могу продолжить? i2ijeya
0

Просто, не требуется jQuery:

<a href="javascript:clearChecks('group1')">clear</a>

<script type="text/javascript">
function clearChecks(radioName) {
    var radio = document.form1[radioName]
    for(x=0;x<radio.length;x++) {
        document.form1[radioName][x].checked = false
    }
}

</script>
-1
YES<input type="radio" name="group1" id="sal" value="YES" >

NO<input type="radio" name="group1" id="sal1" value="NO" >

<input type="button" onclick="document.getElementById('sal').checked=false;document.getElementById('sal1').checked=false">
хорошо, теперь это работает, я редактирую свой предыдущий код. Salil
Это на самом деле не сработает, если проверено NO, потому что javascript никогда не увидит 2-й элемент с таким же идентификатором. Shawn Steward
-1. Недопустимый HTML, чтобы иметь несколько элементов с одинаковым идентификатором. Josh
3

Не лучше ли было бы просто добавить третью кнопку («ни»), которая даст тот же результат, что и ни одна из выбранных?

Я цитирую это решение. Переключатели, как элемент пользовательского интерфейса, не предназначены для сброса (т. Е. Ни одна из них не отмечена). Они предназначены для запуска с 1 опцией, отмеченной, и возможностью ее изменения. Вы можете поменять свои переключатели на выпадающий список: {пусто} | Да | Нет Filini
@Filini Windows-формы программирования имеют переключатели с тремя состояниями, не знаю, почему их нельзя использовать для Интернета. Shawn Steward
@ Шон, ты уверен, что не думаешь о флажках с тремя состояниями? Во всяком случае, как это связано с возможностью сброса радиокнопки? Filini
@ Филини - иногда вам может понадобиться сбросить переключатели, все не отмечены. Я столкнулся с ситуацией в приложении викторины - когда пользователь перезапускает викторину, все опции (переключатели) должны быть отключены (созданы в AngularJS). Umesh
5

Если вы не собираетесь использовать jQuery, вы можете использовать простой JavaScript, как это

document.querySelector('input[name="Choose"]:checked').checked = false;

Единственное преимущество в том, что вам не нужно использовать петли для двух переключателей

1

Подход ES6 к очистке группы переключателей:

    Array.from( document.querySelectorAll('input[name="group-name"]:checked'), input => input.checked = false );
96

Вам не нужно иметь уникальныйid для элементов, вы можете получить к ним доступ по ихname атрибут:

Если вы используетеname="Choose", затем:

С jQuery это так же просто, как:

$('input[name=Choose]').attr('checked',false);

или в чистом JavaScript:

   var ele = document.getElementsByName("Choose");
   for(var i=0;i<ele.length;i++)
      ele[i].checked = false;

Демо для JavaScript

в версии jquery выше 1.6 используйте $ ('input [name = Choose]'). prop ('флажок', false); Irfan Yusanif
На самом деле, это то, что предложил Дэвид Андерссон. Я предполагаю, что пропустил его комментарий прежде, чем я отправил. NVRAM
+1 Это действительно работает NVRAM .. Спасибо, и я выбираю это как мой принятый ответ. Спасибо всем за ваши ценные ответы. i2ijeya

Похожие вопросы