检查常用下拉项(JavaScript、jQuery)

ia2d9nvy  于 2023-01-30  发布在  jQuery
关注(0)|答案(3)|浏览(104)

我需要一些关于下面代码的帮助。
因此,我有一个类似于下面示例中的页面。
到目前为止,我尝试了以下方法。(请检查我的代码和示例)
使用我当前的方法来选择复选框,我必须为每个选项编写代码,就像这样。

$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)

有没有更简单的方法来做到这一点?例如,我们可以只选择每一个包含us_, as_, eu部分,而不是分配唯一的值给每个选项。任何帮助,您可以提供将不胜感激。
x一个一个一个一个x一个一个二个x

bogh5gae

bogh5gae1#

当然可以!不要通过元素的ID(必须是唯一的)来访问元素,而是给予它们一个公共类,然后通过这个类来获取它们。
元素看起来像这样:

<input type="checkbox" id="check_us-1" checked />
<input type="checkbox" id="check_us-2" checked />

获取一个额外的职业 prop ,如下所示:

<input type="checkbox" id="check_us-1" class="us" checked />
<input type="checkbox" id="check_us-2" class="us" checked />

然后可以像这样批量更新他们的 prop :

$(".us").prop("checked", !0)
hgqdbh6s

hgqdbh6s2#

无需修改当前HTML,您可以选择class中包含字符串的所有元素:

$('checkbox[class^="us"]')

并将其复选框值更改为:

$('checkbox[class^="us"]').prop("checked", !0)

然后把我们改成你想要的任何词。

gjmwrych

gjmwrych3#

有几种方法可以实现这一点,使用JavaScript或jQuery。
您可以使用attribute contains选择器来查找ID与某个模式匹配的所有元素:

$('[id*="us_"]').prop('checked', true);

这种形式的选择器也可以与JavaScript的原生document.querySelector()方法一起使用。
然而,这会冒无意中选择碰巧与选择器匹配的不相关元素的风险,例如,上面的选择器也会匹配id为“status_code”的元素。
@jonny在他的回答中建议了一个更好的方法,虽然文档中每个元素的id属性必须是唯一的,但其他属性如“class”不是,这允许你为一组相关的元素指定一个css类名,然后使用class选择器通过类名选择它们(同样,这个选择器也可以使用document.querySelector method)。
就个人而言,我不喜欢使用css类名称来选择相关的元素组,因为css类是用于样式的,而不是用于功能的,所以如果你想保持样式和函数的分离,另一种方法是包含data attributes,如下所示:

<input type="checkbox" id="check_us-1" checked data-group="us" />
<input type="checkbox" id="check_us-2" checked data-group="us" />

然后可以使用属性选择器选择两个输入:

$('[data-group="us"]').prop('checked', true);

相关问题