Как переключать радиокнопки по нажатиям на обычные кнопки?

Question

[infly_32]

Есть 4 input типа radio и с значением (value) и 4 кнопки с соответствующими значениями.
Вопрос: как сделать чтоб при нажатии кнопки (например с value=1) отмечался input с тем же значением
Делаю так. С подстановкой переменной в атрибут.

<input type="radio" value="1" name="size">
<input type="radio" value="2" name="size">
<input type="radio" value="3" name="size">
<input type="radio" value="4" name="size">
<button value="1">Первый</button>
<button value="2">Второй</button>
<button value="3">Третий</button>
<button value="4">Четвертый</button>

$(document).ready(function() {
	$("button").on('click', function() {
                var btn = $(this).val();
		$("input[value='$btn']").attr('checked', 'checked');
	});
});

Не работает. Как передать переменную?

Answer 1

[0xD34F]

Не надо никакого value у кнопок, если уж хотите связывать элементы через значения атрибутов, пусть это будет data-атрибут: <button value=" ---> <button data-value=".

Назначаем делегированный обработчик клика, один для всех:

document.addEventListener('click', ({ target: { dataset: { value } } } ) => {
  if (value) {
    document.querySelector(`[name="size"][value="${value}"]`).click();
  }
});

Или, каждой кнопке индивидуально:

const radios = [...document.querySelectorAll('[name="size"]')];
const buttons = [...document.querySelectorAll('button')];

// можно смотреть на значение data-атрибута
const onClick = e => radios.find(n => n.value === e.target.dataset.value).click();
// или, кликать радиокнопку с тем же индексом, что и у кнопки обычной
const onClick = e => radios[buttons.indexOf(e.target)].click();

buttons.forEach(n => n.addEventListener('click', onClick));

Answer 2

[dicem]

Comments

[infly_32]

Спасибочки большое работает!!! Без Вас бы не справилась)