在 foreach 中选择特定的单选项目 - Select specific radio item in foreach

我有一些数据女巫我在 foreach 中循环。该数据input type=radio带有名称的按钮。如何在每个项目中选择特定项目。

我的代码：

<?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>

您可以向两个input添加data-*属性，button相同的元素，使用.filter()选择在button click具有相同.data()值的元素，.prop("checked", true)选择与元素匹配button元素input元素.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>

如果你的 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>

这个jQueryJavaScript应该可以工作：

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

将它们放在一个 jsfiddle 中https://jsfiddle.net/t1z1pm8x/

对于做这个简单的任务，使用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;
}

查看下面的代码段。

<?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()回调函数，这将返回回调返回，根据要求，在与单选按钮文本匹配的情况下，结果数量有限。

https://jsfiddle.net/zcvt1jo4/