2013-07-29 140 views
0

我嵌套的HTML标签&输入标签不for=""属性的标签,所以我不能只用selecor轻松检查标签:检查标签值

<ul id="categorychecklist" data-wp-lists="list:category" class="categorychecklist form-no-clear">  
    <li id="category-6" class="popular-category"><label class="selectit"><input value="6" type="checkbox" name="post_category[]" id="in-category-6"> Action</label></li> 
    <li id="category-7" class="popular-category"><label class="selectit"><input value="7" type="checkbox" name="post_category[]" id="in-category-7"> Adventure</label></li> 
</ul> 

我要检查,如果标签是“行动“或”冒险“然后检查其复选框输入。

任何帮助表示赞赏。

+1

$('li label')。text();应该可以工作 – Sergio

+0

@Sergio:是的,在那里抛出一个'$ .trim' ... –

+0

你还没有告诉我们什么触发你的代码来检查这些元素。如果用户点击复选框会触发检查,那么请查看我的答案以获取可能的解决方案(使用jsFiddle示例)。 – gibberish

回答

2

$.trim($("li label").text())是你在找什么。这将在label中给出单独的文字。要检查具有动作的复选框,您必须在标签/复选框上运行循环。我选择了循环播放标签。

$("li label").each(function (i) { 
    //check if text has Action or adventure 
    //this is equivalent to if($.trim($(this).text() === "Action" || $.trim($(this).text() === "Adventure") 
    var isTrue = ["Action", "Adventure"].indexOf($.trim($(this).text())) != -1 
    //search for the checkbox and change its property 
    $("[type=checkbox]", this).prop("checked", isTrue); 
}); 

演示:http://jsfiddle.net/8w9SC/2/

+0

谢谢,然后如何选择相关复选框? – revo

+0

检查更新的答案@revo – krishgopinath

1

你可以做到这一点的方式不同,不知道你需要什么。

如果你点击复选框

$('input[type=checkbox]').on('change', function (e) { 
    var value = $(e.target).val(); 
    var name = $.trim($(e.target).parent().text()); 
}); 

,或者如果你只是运行代码,寻找它

$('li label').each(function() { 
    var name = $.trim($(this).text()); //name of the label 
    var value = $(this).closest('li').val(); //value of the input of that label 
}); 
+0

对于'nearest()'方法+1。 – revo

0

假设你需要检查哪些复选框刚才检查的用户来说,这应该为你工作:

jsFiddle

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('[id^=in-category]').click(function() { 
      var xx = $(this).parent().text(); 
      alert(xx); 
      var yy = $(this).is(':checked') ? 1 : 0; 
      alert(yy); 
     }); 

    }); //END $(document).ready() 
</script>