Установите значение флажка с помощью jQuery или JavaScript

Question

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

Я использовал jQuery, чтобы проверить, но ничего не происходит

jQuery(document).ready(function($) {    
  $("input.myclass[name='test-case'][value='yes']").prop("checked", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="test-case[]" id="cbopt-AAljenwo" value="yes">

Не уверен, что это правильное значение маркировки ввода, как проверено. Пользователь также может снять флажок, если ему не нравится опция. Любая помощь приветствуется.

Answer 1

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

<input type="checkbox" checked="checked"/>

Спасибо

Answer 2

Лучший способ добиться этого - поместить атрибут checked в HTML. Однако вы утверждаете, что HTML генерируется для вас, поэтому у вас нет этой опции.

Второй лучший вариант - установить флажок на его id, однако он имеет тот же проблема для вас, поскольку id динамически генерируется во время выполнения.

В крайнем случае вы должны выбрать элемент по name и value, что и пытается сделать ваш jQuery, однако есть пара проблем. Во-первых, у флажка, на который вы нацеливаетесь, нет класса, а у атрибута name есть суффикс [], который необходимо включить. Попробуйте это:

jQuery($ => {
  $('input[name="test-case[]"][value="yes"]').prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="test-case[]" value="yes">

Answer 3

просто что:

const theChexbox = document.querySelector("input[name='test-case[]']")

theChexbox.checked = true

<input type="checkbox" name="test-case[]" id="cbopt-AAljenwo" value="yes">

Answer 4

Хорошо, вы можете выбрать элемент input с типом checkbox с именем test-case[] со значением yes, исключается только идентификатор, так как вы говорите, что он генерируется динамически, но вы не сказали где на стороне сервера или на стороне клиента.

document.querySelector("input[type='checkbox'][value='yes'][name='test-case[]']").checked = true;

<input type="checkbox" name="test-case[]" id="cbopt-AAljenwo" value="yes">

Использование jQuery

$("input[type='checkbox'][value='yes'][name='test-case[]']").attr("checked", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="checkbox" name="test-case[]" id="cbopt-AAljenwo" value="yes">