Форум

Neznajka · #1 (**permalink**) 27.11.2022, 18:52

Имеется такая html-разметка:

<div id="infaSpsVal" class="marLft borRadBot">
	<div class="optWrap">
		<input id="rad1" type="radio" name="radTri" value="-1">
		<label for="rad1">Papier</label>
		<div class="radInd"></div>
		<div class="radFon"></div>
	</div>
	<div class="optWrap">
		<input id="rad2" type="radio" name="radTri" value="0" checked>
		<label for="rad2">-?-</label>
		<div class="radInd"></div>
		<div class="radFon"></div>
	</div>
	<div class="optWrap">
		<input id="rad3" type="radio" name="radTri" value="1">
		<label for="rad3">System</label>
		<div class="radInd"></div>
		<div class="radFon"></div>
	</div>
</div>

И имеется переменная var per=0
Переменная может принимать значения 0, или 1, или 2.
Мне необходимо, в зависимости от значения этой переменной, активировать (сделать checked) соответствующий input.
Подскажите, как лучше обратиться к соответствующему input'у через их общего родителя #infaSpsVal.
Я пробовал например так $('#infaSpsVal input').eq(1) - но почему-то не пошло...

рони · #2 (**permalink**) 27.11.2022, 19:14

Neznajka,
что не так?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
$(function() {
     var per=1;
     $('#infaSpsVal input').eq(per).prop('checked', true)
});
  </script>
</head>

<body>
<div id="infaSpsVal" class="marLft borRadBot">
	<div class="optWrap">
		<input id="rad1" type="radio" name="radTri" value="-1">
		<label for="rad1">Papier</label>
		<div class="radInd"></div>
		<div class="radFon"></div>
	</div>
	<div class="optWrap">
		<input id="rad2" type="radio" name="radTri" value="0" >
		<label for="rad2">-?-</label>
		<div class="radInd"></div>
		<div class="radFon"></div>
	</div>
	<div class="optWrap">
		<input id="rad3" type="radio" name="radTri" value="1">
		<label for="rad3">System</label>
		<div class="radInd"></div>
		<div class="radFon"></div>
	</div>
</div>

</body>
</html>

Neznajka · #3 (**permalink**) 27.11.2022, 19:32

Спасибо большое, рони
Я "cheked" указывал с ошибкой

рони · #4 (**permalink**) 27.11.2022, 19:58

Neznajka,
так проще ...

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let radio = document.querySelectorAll('[name="radTri"]');
            let per = 1;
            radio[per].checked = true;
        })
    </script>
</head>

<body>
    <div id="infaSpsVal" class="marLft borRadBot">
        <div class="optWrap">
            <input id="rad1" type="radio" name="radTri" value="-1">
            <label for="rad1">Papier</label>
            <div class="radInd"></div>
            <div class="radFon"></div>
        </div>
        <div class="optWrap">
            <input id="rad2" type="radio" name="radTri" value="0">
            <label for="rad2">-?-</label>
            <div class="radInd"></div>
            <div class="radFon"></div>
        </div>
        <div class="optWrap">
            <input id="rad3" type="radio" name="radTri" value="1">
            <label for="rad3">System</label>
            <div class="radInd"></div>
            <div class="radFon"></div>
        </div>
    </div>
</body>

</html>

Neznajka · #5 (**permalink**) 27.11.2022, 20:59

Да, спасибо - это действительно лучше. Только я его переделаю слегка на JQ. Не люблю сырой JS с его замыканиями и прочими непонятками

Форум

Справочник

Discord чат

Курсы javascript