在 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/
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- 更新:仅根据单选按钮和所选选项选择特定项目
- 当表单控件选项具有多个参数时,如何在组合框中填充所选项目
- 在 foreach 中选择特定的单选项目
- 单选表上的项目
- 表单下拉列表(微调器)并尝试将值更改为所选项目值
- Jquery 单选框选中查找显示以前选中的项目
- 单选按钮组显示所选值 jQuery 上的项目
- jQuery函数,一个用于在单击时显示下拉列表,另一个用于从下拉列表中获取所选项目
- 如何在手把模板中的单选按钮组中设置所选项目
- 如何在下拉列表中获取“所选项目”,同时单击 编辑 ASP中内联剑道网格中的按钮
- 下拉所选项目并单击按钮
- & lt; select>当表单加载时,标签不加载所选项目
- 点击添加到列表按钮获得项目添加到列表框从文本框和单选在javascript
- 单选按钮列表选择的项目值在javascript中
- 是否在单击时使语义UI搜索选择下拉滚动到所选项目
- 如何使用单选按钮隐藏html项目
- JSF选择带有图像的OneRadio项目,如何设置单选按钮CHECKED
- 根据所选项目更改表单操作