javascript - 在 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

您可以向相同的 input 、 button 元素添加 data-* 属性，使用 .filter( ) 选择在 button 的 click 处具有相同 .data() 值的元素，.prop("check", true) 选择与 button 元素 .data() 匹配的 input 元素

$("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>