Laravel foreach循环中jQuery拼接ID仅获首个值的解决方法

安全阿岳

2026-8-22

解决Laravel Blade循环中jQuery获取所有循环项ID及对应元素值的问题

第一步：修正Blade模板的错误

你的Blade模板里存在标签关联错误，<label>的for属性需要对应每个radio的唯一ID，否则点击标签无法触发radio选中状态：

@foreach ($rentalcategories as $category)
  <div class="checkbox checkbox-success">
    <input type="text" value="{{ $category->id }}" class="catid">
    <input type="radio" name="rentalcategory" class="rentalcattitle" id="rentalcat{{ $category->id }}" value="{{ $category->id }}">
    <label for="rentalcat{{ $category->id }}" class="control-label"> {{ $category->rentalcat_title }}</label><span>({{ $category->rentalhses->count() }})</span>
  </div>
@endforeach

第二步：用jQuery正确获取所有循环项的ID及对应元素状态

你当前的jQuery代码只返回第一个.catid的值，因为直接调用.val()仅作用于第一个匹配元素。要处理所有循环项，需要通过遍历实现：

方式1：遍历所有循环项，逐个获取ID和对应radio状态

// 遍历所有.catid元素
$(".catid").each(function() {
    var categoryid = $(this).val();
    console.log(categoryid);
    // 获取对应radio的选中状态与值
    var targetRadio = $('#rentalcat' + categoryid);
    var hsecategory = targetRadio.prop('checked') ? targetRadio.val() : '';
    console.log(`分类ID: ${categoryid}, 选中状态值: ${hsecategory}`);
});

方式2：直接获取当前选中的radio（仅需选中项时使用）

由于你的radio是同名name="rentalcategory"，同一时间仅能选中一个，若只需获取选中项的信息，可简化代码：

// 筛选出选中的radio元素
var checkedRadio = $("input[name='rentalcategory']:checked");
if (checkedRadio.length > 0) {
    var categoryid = checkedRadio.val();
    console.log(categoryid);
    var hsecategory = categoryid;
}