複選框在點擊相關標籤時被選中

我有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

複選框在點擊相關標籤時被選中

回答

相關問題