Выберите конкретный элемент радио в foreach

Question

У меня есть некоторые данные, которые я зацикливаю в foreach. Этими данными являются input type=radio кнопки с именем. Как я могу выбрать конкретный элемент в foreach.

Мой код:

<?php foreach($items as $item): ?> 
    <input type="radio" name="price" value="<?= $item['id'];?>"> <?= $item['name'];?> // 15 items looped 
<?php endif; ?> 

Выход

<input type="radio" name="price" value="1"> 10$ 
<input type="radio" name="price" value="2"> 20$ 
<input type="radio" name="price" value="3"> 30$ 
<input type="radio" name="price" value="4"> 40$ 
<input type="radio" name="price" value="5"> 50$ 
<input type="radio" name="price" value="6"> 60$ 

У меня есть пользовательские кнопки цена. Когда я нажимаю кнопку «Я», я хочу выбрать одну конкретную радиокнопку в foreach.

<button>select 10$ </button> 
<button>select 20$ </button> 
<button>select 30$ </button> 

Answer 1

Вы может добавить data-* атрибута к обеим input, button элементам, которые являются такими же, использовать .filter(), чтобы выбрать элементы, которые имеют один и то же .data() значения при click из button, .prop("checked", true), чтобы выбрать input элемент, соответствующих button элемента .data()

$("button").click(function(e) { 
 
    $("input").filter(function(i, el) { 
 
    return $(el).data("value") === $(e.target).data("value") 
 
    }).prop("checked", true) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input type="radio" name="price" value="1" data-value="$10"> 10$ 
 
<input type="radio" name="price" value="2" data-value="$20"> 20$ 
 
<input type="radio" name="price" value="3" data-value="$30"> 30$ 
 
<input type="radio" name="price" value="4" data-value="40"> 40$ 
 
<input type="radio" name="price" value="5" data-value="$50"> 50$ 
 
<input type="radio" name="price" value="6" data-value="60"> 60$ 
 
<button data-value="$10">select 10$ </button> 
 
<button data-value="$20">select 20$ </button> 
 
<button data-value="$30">select 30$ </button>

Answer 2

Ознакомьтесь с нижеприведенной информацией.

<?php foreach($items as $item): ?> 
    `<label><input type="radio" name="price" value="<?= $item['price'];?>"> <?= $item['name'];?></label>` // 15 items looped 
<?php endif; ?> 

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

JQuery для выбора соответствующей кнопки.

$("button").click(function() { 
    var getSelectedText = $(this).text().split(" "); 
    $("input[type=radio][name=price]").filter(function() { return ($(this).parent().text().trim().toLowerCase()==getSelectedText[1].trim().toLowerCase()); }).attr("checked", true); 
}); 

здесь мы идем с вами искомое решение .. :)

Термины, используемые

.split() ожидает один параметр 'with what string to split' здесь, в вашем случае это 'space'

.filter() обратного вызова функция возвращает возвращаемый ответ с ограниченным количеством результатов, в соответствии с требованиями, в вашем случае, соответствующем радио, но ns текст.

https://jsfiddle.net/zcvt1jo4/

Answer 3

Если ваш HTML выглядит следующим образом:

<div id="checkboxes"> 
    <input type="radio" name="price" value="1"> 10$ 
    <input type="radio" name="price" value="2"> 20$ 
    <input type="radio" name="price" value="3"> 30$ 
    <input type="radio" name="price" value="4"> 40$ 
    <input type="radio" name="price" value="5"> 50$ 
    <input type="radio" name="price" value="6"> 60$ 
</div> 

<div id="buttons"> 
    <button data-val="1">select 10$ </button> 
    <button data-val="2">select 20$ </button> 
    <button data-val="3">select 30$ </button> 
    <button data-val="4">select 40$ </button> 
    <button data-val="5">select 50$ </button> 
    <button data-val="6">select 60$ </button> 
</div> 

Это JQuery Javascript должен работать:

$('#buttons button').click(function() { 
    var value = $(this).data('val'); 
    $('#checkboxes input').eq(value-1).attr('checked', true); 
}) 

Положите все это вместе в jsfiddle https://jsfiddle.net/t1z1pm8x/

Answer 4

Для выполнение этой простой задачи, использование jQuery является излишним. это может быть достигнуто с использованием только javascript.

<?php 
$i = 0 
foreach($items as $item){ 
?> 
<input type="radio" name="price" id="i<?=$i?>" value="<?= $item['price'];?>"><?= $item['name'];?> // 15 items looped 
<? $i++; } ?> 

Выход:

<input type="radio" name="price" id="i1" value="1"> 10$ 
<input type="radio" name="price" id="i2" value="2"> 20$ 
<input type="radio" name="price" id="i3" value="3"> 30$ 
<input type="radio" name="price" id="i4" value="4"> 40$ 
<input type="radio" name="price" id="i5" value="5"> 50$ 
<input type="radio" name="price" id="i6" value="6"> 60$ 

<button id="1" onclick="select_radio(this.id)">select 10$ </button> 
<button id="2" onclick="select_radio(this.id)">select 20$ </button> 
<button id="3" onclick="select_radio(this.id)">select 30$ </button> 

определить функцию

function select_radio(id){ 
    document.getElementById("i"+id).checked = true; 
}