如何處理標籤點擊+複選框點擊？

當點擊複選框時，我在表單上運行一些驗證，該複選框按預期工作。如何處理標籤點擊+複選框點擊？

$('#ilikeicecream').click(function(){ 
    runValidation(); 
});

複選框也有一個標籤元素，所以我也需要檢查。我的第一反應是做到以下幾點：

$('#ilikeicecream-label').click(function(){ 
    runValidation(); 
});

的問題是，該複選框尚未在這一點上選中狀態，以便爲預期的驗證不起作用。我怎樣才能解決這個問題？

來源

2012-02-09 Mike

使用change()：

$('#ilikeicecream').change(function(){ 
    runValidation(); 
});

對於選擇框，複選框和單選按鈕，立即當用戶用鼠標的選擇的事件被觸發，但對於另一元件類型的事件被推遲，直到元素失去焦點。

我在測試的jsfiddle用下面的代碼。我無法提供鏈接，但是因爲jsfiddle目前處於關閉狀態。

<label for="ilikeicecream">sdsd</label><input id="ilikeicecream" type="checkbox" /> 

$('#ilikeicecream').change(function(){ 
    alert("test"); 
});

如果不工作，也許你還沒有指定for屬性，爲label匹配input。

來源

2012-02-09 17:10:04 Curt

那也是我嘗試沒有成功的東西。變化似乎並沒有發生。 – Mike 2012-02-09 17:11:33

我在jsfiddle中測試過，它工作正常。你能發佈你的HTML嗎？ – Curt 2012-02-09 17:15:38

@Beavis - 如果這不起作用，也許你沒有在你的標籤中指定for屬性來匹配輸入。 – Curt 2012-02-09 17:21:21

$('#ilikeicecream-label').click(function(){ 
    // Swap the checked property value of the check box here 
    runValidation(); 
})

來源

2012-02-09 17:11:14 Shyju

只需使用<label>標記包裝複選框即可。當您單擊標籤時，複選框將自動更改，從而觸發change事件，您可以在其中調用runValidation()函數。

<label><input type="checkbox" value="1" id="blahblah" name="myname" /></label>

，不斷複選框的.change處理器（你不需要爲它的標籤單獨一個）......

來源

2012-02-09 17:16:34

這應該爲你工作...

$('#ilikeicecream').change(function(){ 
    runValidation(); 
}); 

$('#ilikeicecream-label').click(function(){ 
    if($('#ilikeicecream').attr('checked')){ 
      $('#ilikeicecream').attr('checked', false); 
    } 
    else{ 
      $('#ilikeicecream').attr('checked', true); 
    } 
    runValidation(); 
});

來源

2012-02-09 17:16:55 musefan

如何處理標籤點擊+複選框點擊？

回答

相關問題