从sorrounding标签的标签文本中选择复选框？

问题描述：

<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是动态生成的，并且会不时发生变化。文字“工作坊”不过是由我设定的，我想知道是否可以用某种方式编写一个使用此“工作坊”字符串选择复选框的选择器？

有关于此的任何想法？

由标签有效的HTML包装一个复选框？ – JeffSahol 2012-04-12 13:45:54

@JeffSahol这不仅是有效的，这是非常好的做法，因为它提供了一个更大的命中区域。 – 2012-04-12 13:47:56

答

尝试的部份:contains选择：

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

这就是它，谢谢！ @rest我无法更改HTML，因为它是wordpress的后端。只有标签由我设定。 – matt 2012-04-12 14:07:47

答

给你的标签，一种属性：

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

编辑：道歉，并没有实现身份证的变化不时。你也可以放一些jQuery来查找输入，然后指定for。想要这样：

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

答

难道不能添加一个类吗？

之后更容易选择它？

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

答

，如果你能控制你的输入把一个类就可以了（可以称之为“生产车间”），那么这将是：

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

答

所以，其他人说使用类- 听他们说！这很容易！

但是，有时更改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

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

答

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

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

从sorrounding标签的标签文本中选择复选框？

相关推荐