从周围的标签中选择标签文本的复选框？答案

【问题标题】：Select checkbox by label-text from sorrounding label?从周围的标签中选择标签文本的复选框？
【发布时间】：2012-04-24 20:57:16
【问题描述】：

以下结构：

<label class="selectit">
    <input value="3" type="checkbox" name="tax_input[event_type][]" id="in-event_type-3">
     Workshops
</label>

我可以很容易地找出复选框是否被选中……

if ( $('#in-event_type-3').attr('checked') ) {

还有什么方法可以使用选择器，我可以在“研讨会”中选择复选框？问题是checkbox的id是动态生成的，不时变化。 label-text "Workshops" 但是是我设置的，我想知道我是否可以编写一个使用这个 "Workshops" 字符串来选择复选框的选择器？

对此有什么想法吗？

【问题讨论】：

用标签包裹复选框是否有效？
@JeffSahol 这不仅有效，而且是非常好的做法，因为它提供了更大的命中区域。

标签： jquery jquery-selectors checkbox

【解决方案1】：

试试:contains 选择器：

$(".selectit:contains('Workshops')").find(":checkbox").prop('checked');

【讨论】：

就是这样，谢谢！ @rest我无法更改html，因为它是wordpress的后端。只有标签是我设置的。

【解决方案2】：

给你的标签一个 for 属性：

<label class="selectit" for="in-event_type-3">

编辑：抱歉，没有意识到 ID 会不时更改。你也可以放一些 jQuery 来查找输入，然后分配 for。像这样：

$('input').each( function() {
    $(this).parent().attr('for', $(this).attr('id') );
});

【讨论】：

【解决方案3】：

不能加类吗？

以后更容易选择了吗？

if($('.Workshops').is(':checked'))

【讨论】：

【解决方案4】：

如果您可以控制您的输入以在其上放置一个类（我们称之为“工作坊”），那么它将是：

$(".workshop").attr("checked", "checked");

【讨论】：

【解决方案5】：

所以，其他人都说过要使用课程 - 听他们说！这更容易！

但是，有时更改 HTML 内容根本不是一种选择。在这种情况下，我们将不得不求助于一些肮脏的工作并查看标签元素中包含的所有文本以找到相应的复选框。

var selectedCheckboxes = [];
$.each($("#container > label"),function(index,elem){
  var labelText = $(elem).text();
  var testString = "Workshops";
  if (labelText.match(testString)){
    selectedCheckboxes = $(elem).find("input[type='checkbox']:checked");
  }
});

我必须警告您，此解决方案适用于您提供的简单示例，但是如果标记稍微复杂一些（例如在具有自己的文本内容的附加子元素中），那么此方法将不得不变得更大并且复杂得多。

没有内置的选择器来匹配 HTML 标记中元素的文本内容，这是正确的。元素的文本内容应该只是数据或信息的可视化表示；它不应该包含身份信息。为了识别一个元素和集合与其兄弟或后代分开，我们使用id 和class 属性。还有更多可以使用的，但这些是基本的构建块。

这里需要注意的一点是 jQuery 的 .text() 函数的行为。它会：

获取匹配元素集中每个元素的组合文本内容，包括它们的后代。

^强调

:contains() 选择器在后代方面具有类似的行为，并且在之前的答案中有 already been covered。

关于这个限制的更多动手和视觉示例......

鉴于这个简约的 HTML sn-p：

<div id="matt">
  One
  <span>Two</span>
  <div> 
     <label>Three</label>
  </div>
  Four
</div>

调用$("#matt").text() 会导致：

一二三四

所有的后代文本内容也包括在内...

【讨论】：

【解决方案6】：

var element = $('input').filter(function() {
    return $.trim($(this).parent('label').text())=='Workshops'?$(this):null;
});

var isChecked = $(element).attr('checked'); //true-false

【讨论】：