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

查看下面的代码。

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

在foreach中选择特定的单选项

4 个答案: