Javascript 单击“检查div中最近的单选按钮”

我正在尝试设置一些单选按钮的样式，以便当您单击div时，它会选择div中的单选按钮

此时，例如，当您单击列表中的第三个div时，它将选择第一个div的输入。它们都具有与写入razor

foreach

循环中相同的ID

下面是生成的HTML

<div id="world-container" class="d-flex">
   <div class="button-styles image-item">
      <input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="1">
      <label for="CityTypeId">Urban</label>
   </div>
   <div class="button-styles image-item">
      <input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="2">
      <label for="CityTypeId">Countryside</label>
   </div>
   <div class="button-styles image-item">
      <input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="3">
      <label for="CityTypeId">Coastal</label>
   </div>
</div>

由于

MVCForeach

循环，我无法更改此HTML的编写方式

任何建议或建议如何绕过这将是伟大的

---

提前感谢

ID必须是唯一的，这就是代码无法工作的原因。尝试直接以

输入为目标

$(this).children('input').prop('checked', true);

ID必须是唯一的，这就是代码不能工作的原因。尝试直接以
输入为目标

$(this).children('input').prop('checked', true);

id在文档中应该是唯一的，因为复制了
id
，所以出现了语义错误

对于您的问题，请使用类：（您已经预先定义了类）

请参阅下面的代码片段：


$（“.button styles”）。在（“单击”上，函数（）{
$（this.find（'input.city-type-radio'）.prop（'checked'，true）；
});
.image项{
边框：1px纯色灰色；
}

城市的
乡村
沿海的
一个id在文档中应该是唯一的。您复制了
id
，因此出现了语义错误

对于您的问题，请使用类：（您已经预先定义了类）

请参阅下面的代码片段：


$（“.button styles”）。在（“单击”上，函数（）{
$（this.find（'input.city-type-radio'）.prop（'checked'，true）；
});
.image项{
边框：1px纯色灰色；
}

城市的
乡村
沿海的
从标签中删除
的
。从输入中删除
id
，从标签中删除
的
。从输入中删除
id
$(this).find('input').prop('checked', true);

$(this).find('input.city-type-radio').prop('checked', true);