JS — как сделать первый radio checked?

Question

[alalala]

Помогите
имеется такая конструкция, которая выводится циклом
т.е я не могу туда всунуть checked
на выходе вот такое

<div id="input-option234">
      <div class="mainradio">
            <label class="radiocontainer">
				 <input type="radio" name="option[234]" value="38">
                     1 шт
                     <span class="checkmark2"></span>
             </label>
      </div>
      <div class="mainradio">
            <label class="radiocontainer">
				 <input type="radio" name="option[234]" value="39">
                     3 шт
                     <span class="checkmark2"></span>
             </label>
      </div>
      <div class="mainradio">
            <label class="radiocontainer">
				 <input type="radio" name="option[234]" value="40">
                     5 шт
                     <span class="checkmark2"></span>
             </label>
      </div>
</div>

как первому radio задать checked ?

Спасибо

Comments

[Ярослав Иванов]

<input type="radio" name="option[234]" value="38" checked>

[Exploding]

т.е я не могу туда всунуть checked

Почему?

[alalala]

Ярослав Иванов, вы читать умеете?
я же написал что формируется все циклом
в html я не могу влезть

[alalala]

Exploding, потому, что цикл с радио кнопок формирует движок

[Exploding]

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

[Ярослав Иванов]

alalala, не умею

Answer 1

[Игорь]

Атрибут checked, почему вы его не можете использовать?

UDP: С помощью JS

document.querySelectorAll('input[type="radio"]')[0].checked = true;

Но сработает как ожидается уже после того как <div id="input-option234"> в DOM сформирован.

Comments

[alalala]

читать умеете?
в голом html я и сам могу сделать
но вывод формируется автоматически циклом

[hzzzzl]

alalala,

for (let i = 0; i < 66; i++) {
  /* добавить кнопку */
  if (i === 0) { /* добавить checked */ }
}

[Игорь]

alalala, Тогда прикладывайте тот код, который формирует этот HTML, а не сам HTML. Каков вопрос - таков ответ

[Игорь]

hzzzzl, что это? Покажите как вы html формируете, как цикл выглядит я и без вас знаю

for (let i = 0; i < 66; i++) {
  /* добавить кнопку */
  if (i === 0) { /* добавить checked */ }
}

[hzzzzl]

loonny, это же я для алалалы

[Игорь]

hzzzzl, Короче можете не палить свой секретный код, я понял вас
вот так попробуйте

document.querySelectorAll('input[type="radio"]')[0].checked = true;

[alalala]

спасибо за ответы
ничего не понял@loonny,
так понятнее станет?

<?php if ($option['type'] == 'radio') { ?>
            <div class="radioblock form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="radioblockh3"><?php echo $option['name']; ?></label>
              <div id="input-option<?php echo $option['product_option_id']; ?>" >
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="mainradio">
                  <label class="radiocontainer">
				  
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                    <?php if ($option_value['image']) { ?>
                    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>                    
                    <?php echo $option_value['name']; ?>
                    <span class="checkmark2"></span>
                  </label>
                </div>
                <?php } ?>
              </div>
            </div>
            <?php } ?>

[alalala]

я показал что на выходе имеем
смысл вам от того как формируется цикл

нужно первому radio дать значение по умолчанию checked

[alalala]

loonny, ниже приложил
не пляшет такой вариант

[alalala]

loonny,
ниже цикла вставил
заработало
Благодарю!

[Игорь]

alalala,

я показал что на выходе имеем
смысл вам от того как формируется цикл

Вы издеваетесь? У вас там информация чтоли секретная? Смысл в том что бы я поняр какая переменная у вас используется для счетчика и используется ли вообще

[alalala]

loonny, Спасибо большое
Ваш код работает
ниже цикла вставил
все гуд

[Игорь]

alalala, Почему мне приходится из вас клещами информацию тянуть если помощь вам нужна?

[Игорь]

alalala, пожалуйста. Можно было и в PHP коде это сделать и не передавать лишний DOM элемент<script></script>

[alalala]

loonny, да я не понимаю зачем вам был сам php, если я показал что на выходе есть
выше приложил код
Спасибо за помощь

[alalala]

loonny, на счет <script> это понятное дело

[Игорь]

alalala, Я же ответил уже на этот вопрос

Смысл в том что бы я поняр какая переменная у вас используется для счетчика и используется ли вообще

Вот, посмотрите на этот код, в нем переменная $i используется как счетчик:

for($i = 0; $i < 10; $i++) {
}

[alalala]

loonny, Благодарю

[Игорь]

alalala, Вы используете foreach цикл, по этому вам нужно отдельно завести переменную, вот смотрите, ваш же код но отредактированный:

<?php if ($option['type'] == 'radio') { ?>
  <div class="radioblock form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
    <label class="radioblockh3"><?php echo $option['name']; ?></label>
    <div id="input-option<?php echo $option['product_option_id']; ?>">
      <?php $i = 0; foreach ($option['product_option_value'] as $option_value) { ?>
        <div class="mainradio">
          <label class="radiocontainer">

            <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>"  <? echo ($i == 0 ? 'checked': '') ?>/>
            <?php if ($option_value['image']) { ?>
              <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
            <?php } ?>
            <?php echo $option_value['name']; ?>
            <span class="checkmark2"></span>
          </label>
        </div>
      <?php $i += 1; } ?>
    </div>
  </div>
<?php } ?>

[Игорь]

alalala, а еще вместо <?php echo "блаблабла"; ?> можно писать так
<?= "блаблабла" ?>

[alalala]

loonny, Спасибо большое
предыдущий js код работает отлично
не буду уже лезть, ковырять код

[Игорь]

alalala, Ваше право

Answer 2

[hzzzzl]

<input type="radio" 
  name="option[<?php echo $option['product_option_id']; ?>]" 
  value="<?php echo $option_value['product_option_value_id']; ?>" 
  <?php if ($option_value === array_key_first($option['product_option_value'])) echo 'checked'; ?>
/>

в php я чувствую себя очень неуверенно, но попробуй как-то так

Comments

[alalala]

благодарю, уже решили вопрос на js

[hzzzzl]

alalala, если все равно генерируется на php, то лучше там и ставить аттрибуты сразу, а то мало ли что у юзера в браузере произойдет ¯\_(ツ)_/¯

Answer 3

[n1ksON]

document.querySelectorAll('input[type="radio"]')[0].checked = true;

Comments

[hzzzzl]

кстати норм хак, querySelector('#input-option234 input') вернет первую кнопку (скорее всего)

[alalala]

getElementById('id')
и где мне взять id элемента? если его нет
может как то можно по типу first-child ? не?

[alalala]

hzzzzl, подробнее можно
я нубный нуб в js