Активирование одновременное двух input[type=radio]
Привет.
Есть 2 формы, одна доставку выбирает, вторая оплату. Задача сделать чтобы для доставки_1 автоматически выбиралась оплата_1, соответственно если выбирается доставка_2 чтобы была выбрана оплата_2 <h2>Доставка</h2> <form action=""> <input type="radio" id="deliveri_1" name="deliveri" value="1"> <input type="radio" id="deliveri_2" name="deliveri" value="2"> <input type="radio" id="deliveri_3" name="deliveri" value="3"> <input type="radio" id="deliveri_4" name="deliveri" value="4"> </form> <h2>Оплата</h2> <form action=""> <input type="radio" id="payment_1" name="payment" value="1"> <input type="radio" id="payment_2" name="payment" value="2"> <input type="radio" id="payment_3" name="payment" value="3"> <input type="radio" id="payment_4" name="payment" value="4"> </form> <script> Как посоветуете реализовать взаимодействие форм? |
corton,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<h2>Доставка</h2>
<form action="">
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3">
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>
<h2>Оплата</h2>
<form action="">
<input type="radio" id="payment_1" name="payment" value="1">
<input type="radio" id="payment_2" name="payment" value="2">
<input type="radio" id="payment_3" name="payment" value="3">
<input type="radio" id="payment_4" name="payment" value="4">
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var form = document.querySelectorAll("form");
[].forEach.call(form, function(item, i) {
item.addEventListener("change", function() {
var inp = item.querySelector('[type="radio"]:checked');
if (inp) form[+!i].querySelector('[type="radio"][value="' + inp.value + '"]').checked = true
})
})
});
</script>
</body>
</html>
|
рони, спасибо!
А если это в рамках одной формы вот так будет: <form action=""> <h2>Доставка</h2> <input type="radio" id="deliveri_1" name="deliveri" value="1"> <input type="radio" id="deliveri_2" name="deliveri" value="2"> <input type="radio" id="deliveri_3" name="deliveri" value="3"> <input type="radio" id="deliveri_4" name="deliveri" value="4"> <h2>Оплата</h2> <input type="radio" id="payment_1" name="payment" value="1"> <input type="radio" id="payment_2" name="payment" value="2"> <input type="radio" id="payment_3" name="payment" value="3"> <input type="radio" id="payment_4" name="payment" value="4"> </form> <script> То так выходит по name нужно проверку делать? |
corton,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<form action="">
<h2>Доставка</h2>
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3">
<input type="radio" id="deliveri_4" name="deliveri" value="4">
<h2>Оплата</h2>
<input type="radio" id="payment_1" name="payment" value="1">
<input type="radio" id="payment_2" name="payment" value="2">
<input type="radio" id="payment_3" name="payment" value="3">
<input type="radio" id="payment_4" name="payment" value="4">
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var form = document.querySelector("form"), obj = {deliveri : 'payment',payment : 'deliveri'};
form.addEventListener("change", function(event) {
var inp = event.target, name = obj[inp.name];
if (name) form.querySelector('[name="'+name+'"][value="' + inp.value + '"]').checked = true
})
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:36. |