Question

以下结构：

<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') ) {

是否还有一些方法可以使用选择器，我可以在“工作坊”中选择复选框？问题是复选框的id是动态生成的，并且会不时更改。然而，label - 文本“工作坊”由我设置，我想知道我是否能以某种方式编写一个使用此“Workshops”字符串来选择复选框的选择器？

有关于此的任何想法吗？

Answer 1

尝试使用:contains选择器：

$(".selectit:contains('Workshops')").find("input[type='checkbox']").attr('checked');

Answer 2

是否无法添加课程？

之后更容易选择它？

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

Answer 3

为您的标签指定属性：

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

编辑：道歉，没有意识到ID不时发生变化。您还可以放置一些jQuery来查找输入，然后分配for。像这样：

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

Answer 4

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

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

Answer 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");
  }
});

我必须警告你，这个解决方案适用于你提供的简单示例，但是如果标记稍微复杂一些（就像在具有自己文本内容的其他子元素中那样）那么这个方法必须得到更大的ALOT很复杂。

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

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

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

^重点增加

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

更多实践以及此限制的可视示例......

鉴于这个简约的HTML片段：

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

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

OneTwoThreeFour

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

Answer 6

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

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

从sorrounding标签中选择标签文字复选框？

6 个答案: