复选框在点击相关标签时被选中

我有checkbox和复选框的说明在label。我想check点击标签时复选框。
标记：复选框在点击相关标签时被选中

<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得到了一个错误。

uncaught exception: Syntax error, unrecognized expression: #[object Object]

什么是我的错？如果这不是一个正确的方法来做到这一点建议替代方式。谢谢。

来源

2012-02-01 Shree Khanal

更新：刚刚在Pavan的回答下看到您的意见，希望将非标签元素用作标签，例如span元素。我的第一个回应是为什么？但是，如果你真的想要，你可以轻松地做到这一点，而无需在JavaScript中编写大量代码和硬编码大量元素标识符（这似乎是您现有代码的当前路径）。

使用中要作为伪标签使用元素的data属性，如下所示：

<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/

原来的答复：

由于帕文已经解释的，可以自动在您的标签使用for属性做到这一点，但至于为什么你的代码没有工作：

你调用CheckCheckBox()功能是传递两个jQuery的对象作为参数如下：

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

但是，如果他们抱着你要处理的元素的ID字符串函数处理这些参数。所以，如果你想保持你的功能就是改变你打电话的方式来传递正确的排序参数：

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1');

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

但是，即使已经检查过，每次点击标签时，您的功能都会将复选框设置为“已检查”。如果你想让它选中和未选中（即正常行为）之间切换，你可以做这样的事情：

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

（但同样，只是做它用for属性的HTML标记）

来源

2012-02-01 07:39:55 nnnnnn

您不需要编写JQuery代码。你可以用HTML来做到这一点。

更改HTML如下

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label>

这里是的jsfiddle。 http://jsfiddle.net/sjG4w/

来源

2012-02-01 07:19:57 Pavan

像帕万说，你不需要这个JS，它是一个本地的HTML方法。标签的'for'属性对应于复选框的'id'。 – 2012-02-01 07:24:48

@Pavan标签并不总是'label'.May可以是'span'.I检查'span'不需要'for属性'。我反复执行这个任务，所以我想要一个调用任何地方的函数。 – 2012-02-01 07:34:50

您可以通过

<label id="lblAssociateWithCheckBox" title="Check" OnClick="JavaScript:ClickedLabel('Check1')" ></label>

做到这一点在ClickedLabel你可以找到通过元素，如果被选中做取消，若取消选取做检查。

来源

2012-02-01 07:26:26

如果您始终使用label和checkbox，那么复选框的label和id的用户for属性与之相同。 e.g：

<label for="name">Name</label> 
<input type="checkbox" id="name">

否则

 CheckCheckBox($('#lblAssociateWithCheckBox'), $(#'Checkbox1')); 
     function CheckCheckBox(lblID, chkID) { 
      lblID.live("click", function() { 
       return $(this).closest(chkID).attr('checked', true); 
      }); 
     }

来源

2012-02-01 07:41:02 thecodeparadox

有两种方法可以做到这一点没有任何JavaScript的。帕文解释的第一种方式，这是使用的属性（相匹配的复选框ID）：

<label><input type="checkbox" id="Checkbox1"> Text</label>

：

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label>

的另一种方式，我宁愿是一个标签，标签内包裹的复选框

这里是两个jsfiddle：http://jsfiddle.net/m4rK5/

来源

2013-12-28 21:12:00 Justin

复选框在点击相关标签时被选中

回答

相关问题