jquery – 单击关联标签时选中复选框

前端之家收集整理的这篇文章主要介绍了jquery – 单击关联标签时选中复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在标签中有复选框和复选框说明.我想在单击标签时选中复选框.
标记
<input id="CheckBox1" type="checkBox" /></div>
<label id="lblAssociateWithCheckBox" title="Check"></label>

在JQuery中我尝试:

$(document).ready(function() {
            CheckCheckBox($('lblAssociateWithCheckBox'),$('CheckBox1'));
            function CheckCheckBox(lblID,chkID) {
                $('#' + lblID).live("click",function() {
                    return $('#' + CheckBox1).attr('checked','checked');
                });
            }
        });

但它不起作用.我在firebug中出错了.

未捕获的异常:语法错误,无法识别的表达式:#[object Object]

我的错是什么?如果这不是一个正确的方法,建议替代方法.谢谢.

解决方法

更新:刚刚在Pavan的回答中看到了你想要使用非标签元素作为标签评论,例如span元素.我的第一反应是为什么?但是,如果你真的想要,你可以轻松地做到这一点,而无需编写大量代码并在JavaScript中硬编码大量元素ID(这似乎是你现有代码的目前路径).

在要用作伪标签的元素中使用数据属性,如下所示:

<span data-labelfor="name">Name</span>
<input type="checkBox" id="name">

然后,您可以使用一些通用jQuery设置单击处理程序,以选择具有该属性的所有元素:

$(document).ready(function() {

     $("[data-labelfor]").click(function() {
         $('#' + $(this).attr("data-labelfor")).prop('checked',function(i,oldVal) { return !oldVal; });
     });

});

工作演示,显示一个简短的函数将行为应用于跨度标签和div:http://jsfiddle.net/TFD72/

原始答案:

正如Pavan已经解释的那样,您可以使用标签中的for属性自动执行此操作,但是为什么您的代码不起作用:

您对CheckCheckBox()函数调用是将两个jQuery对象作为参数传递,如下所示:

CheckCheckBox($('lblAssociateWithCheckBox'),$('CheckBox1'));

但是该函数将这些参数视为包含要处理的元素的ID的字符串.因此,如果您想保持您的功能,只需更改您调用它以传递正确类型的参数的方式:

CheckCheckBox('lblAssociateWithCheckBox','CheckBox1');

这应该可以解决你引用的错误.

但是,您的功能将在标签的每次单击时将复选框设置为“已选中”,即使它已被选中.如果您希望它在已检查和未检查之间切换(即正常行为),您可以执行以下操作:

$('#' + CheckBox1).prop('checked',oldVal) { return !oldVal; });

(但同样,只需使用for属性在html标记中执行此操作.)

猜你在找的jQuery相关文章