Установка radio:checked в зависимости от значения Span
Вроде простая задача. А бьюсь над ней уже 3 час. У меня есть таблица. Количество строк в ней может быть любое.
<tr id="" class="cart-item-pr">
<td class="weight">
<input type="radio" class="rchecking" id="c2" name="price-hours" value="100" /><label for="c2"></label>
<input type="radio" class="rchecking" id="c3" name="price-hours" value="200" /><label for="c3"></label>
<input type="radio" class="rchecking" id="c4" name="price-hours" value="300" /><label for="c4"></label>
<input type="radio" class="rchecking" id="c5" name="price-hours" value="400" /><label for="c5"></label>
</td>
<td class="price">
<span id="price">200</span>
</td>
</tr>
Задача. При загрузки страницы сравнивать значение #price c val #c2, #c3, #c4, #c5 и ставить checked на нужный radio. И чтобы это все происходило для каждой tr.cart-item-pr(строки таблицы). Они могут быть одна, две три и много. Я понимаю что нужно что то мутить через $(this).Но пока не как |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<tr id="" class="cart-item-pr">
<td class="weight">
<input type="radio" class="rchecking" id="c2" name="price-hours" value="100" /><label for="c2"></label>
<input type="radio" class="rchecking" id="c3" name="price-hours" value="200" /><label for="c3"></label>
<input type="radio" class="rchecking" id="c4" name="price-hours" value="300" /><label for="c4"></label>
<input type="radio" class="rchecking" id="c5" name="price-hours" value="400" /><label for="c5"></label>
</td>
<td class="price">
<span id="price">200</span>
</td>
</tr>
<script>
document.querySelector('.rchecking[value="'+document.querySelector("#price").textContent+'"]').checked = true;
</script>
</body>
</html>
|
К сожаленю ваш вариант, так же как и множество решений что сегодня перепробовал работает только с первым <tr id="" class="cart-item-pr">
, а их в таблице будет неизвестное количество. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<tr id="" class="cart-item-pr">
<td class="weight">
<input type="radio" class="rchecking" id="c2" name="price-hours" value="100" /><label for="c2"></label>
<input type="radio" class="rchecking" id="c3" name="price-hours" value="200" /><label for="c3"></label>
<input type="radio" class="rchecking" id="c4" name="price-hours" value="300" /><label for="c4"></label>
<input type="radio" class="rchecking" id="c5" name="price-hours" value="400" /><label for="c5"></label>
</td>
<td class="price">
<span id="price">200</span>
</td>
</tr>
<tr id="" class="cart-item-pr">
<td class="weight">
<input type="radio" class="rchecking" id="c2" name="price-hours-2" value="100" /><label for="c2"></label>
<input type="radio" class="rchecking" id="c3" name="price-hours-2" value="200" /><label for="c3"></label>
<input type="radio" class="rchecking" id="c4" name="price-hours-2" value="300" /><label for="c4"></label>
<input type="radio" class="rchecking" id="c5" name="price-hours-2" value="400" /><label for="c5"></label>
</td>
</tr>
<script>
document.querySelectorAll('.rchecking[value="'+document.querySelector("#price").textContent+'"]').forEach(el=>el.checked = true);
</script>
</body>
</html>
|
gdvorc,
может так?
<script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(function(){
$(".cart-item-pr").each(function(){
var price = $(this).find("td.price span").text();
$(this).find("input.rchecking").filter(function(i, e){return $(e).val() == price;}).prop("checked", true);
});
})
</script>
<table>
<tr id="" class="cart-item-pr">
<td class="weight">
<input type="radio" class="rchecking" id="c2" name="price-hours1" value="100" /><label for="c2"></label>
<input type="radio" class="rchecking" id="c3" name="price-hours1" value="200" /><label for="c3"></label>
<input type="radio" class="rchecking" id="c4" name="price-hours1" value="300" /><label for="c4"></label>
<input type="radio" class="rchecking" id="c5" name="price-hours1" value="400" /><label for="c5"></label>
</td>
<td class="price">
<span id="price">200</span>
</td>
</tr>
<tr id="" class="cart-item-pr">
<td class="weight">
<input type="radio" class="rchecking" id="c2" name="price-hours2" value="100" /><label for="c2"></label>
<input type="radio" class="rchecking" id="c3" name="price-hours2" value="200" /><label for="c3"></label>
<input type="radio" class="rchecking" id="c4" name="price-hours2" value="300" /><label for="c4"></label>
<input type="radio" class="rchecking" id="c5" name="price-hours2" value="400" /><label for="c5"></label>
</td>
<td class="price">
<span id="price">400</span>
</td>
</tr>
</table>
айдишки намеренно не использовала. т.к. они наверняка разные будут. |
#price один для всех будет?
|
атрибут id должен быть уникальным! тут уже миллион раз обсуждалось
|
Примерно так. Но name менять тоже не могу. т.к. это корзина и товары грузит туда cms. А стандартным функционалом цен воспользоваться не получается. У начальника слишком извращенное представления.
В обратную сторону все работает идеально. То есть уже после загрузки тыкаю радио ставит именно в нужное место цену. а вот на оборот... |
Натолкнули меня на мысль. Сейчас попробую сделать по другому
|
name определяет к кой группе радиокнопок относится конкретная. если он у всех будет одинаковый, выбрать можно будет только одну из группы
|
| Часовой пояс GMT +3, время: 15:53. |