Как снять флажок в чистом JavaScript?

Вот код HTML:

<div class="text">
   <input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>

Я хочу изменить значение на false. Или просто снимите флажок. Я хотел бы сделать это в чистом JavaScript, без использования внешних библиотек (без jQuery и т.д.),

Ответы

Ответ 1

<html>
    <body>
        <input id="check1" type="checkbox" checked="" name="copyNewAddrToBilling">
    </body>
    <script language="javascript">
        document.getElementById("check1").checked = true;
        document.getElementById("check1").checked = false;
    </script>
</html>

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

Если вы хотите использовать javascript для доступа к элементам, он имеет очень ограниченный набор функций GetElement *. Таким образом, вам нужно будет привыкнуть давать каждому элементу атрибут UNIQUE id.

Ответ 2

Рекомендуется без jQuery:

Дайте свой <input> идентификатор и обратитесь к нему. Кроме того, удалите checked="" <input> если вы хотите, чтобы этот флажок начинался без уведомления. Тогда это:

document.getElementById("my-checkbox").checked = true;

Чистый JavaScript, без идентификатора элемента (# 1):

var inputs = document.getElementsByTagName('input');

for(var i = 0; i<inputs.length; i++){

  if(typeof inputs[i].getAttribute === 'function' && inputs[i].getAttribute('name') === 'copyNewAddrToBilling'){

    inputs[i].checked = true;

    break;

  }
}

Чистый Javascript, без идентификатора элемента (# 2):

document.querySelectorAll('.text input[name="copyNewAddrToBilling"]')[0].checked = true;

document.querySelector('.text input[name="copyNewAddrToBilling"]').checked = true;

Обратите внимание, что querySelectorAll и querySelector методы поддерживаются в этих браузеров: IE8+, хром 4+, Safari 3. 1+, Firefox 3. 5+ и все мобильные браузеры.

Если элемент может отсутствовать, вы должны проверить его существование, например:

var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
if (!input) { return; }

С помощью jQuery:

$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);

Ответ 3

Есть еще один способ сделать это:

//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck

Ответ 4

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

<input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">

а затем в JavaScript:

document.getElementById("checkboxId").checked = false;