聽取複選框被選中/取消選中的正確方法是什麼？

我使用這個代碼，以檢查是否複選框被選中，如果是，秀子菜單和具體層上圖：聽取複選框被選中/取消選中的正確方法是什麼？

$('input').on('change', function() { 
    var x = $('input:checked').val(); // x gets the value attribute of changed checkbox 
    if ($('input').is(':checked')) { 
    sublayers.getSubLayer(x).show(); // shows specified layer on the map 
    $('#' + x).show(); // shows id targeted submenu under the checked checkbox 
    } else { 
    sublayers.getSubLayer(x).hide(); // hides sublayer on the map if unchecked 
    $('#' + x).hide(); // hides specific submenu 
    } 
});

所以會發生什麼是第一個複選框作品的權利，並按照複選框不要回應。更重要的是，如果我開始檢查從底部到頂部的複選框，他們將顯示適合上面的複選框的子圖層。也取消選中不會觸發任何內容。

來源

2015-12-21 mmdfan

請包括HTML和演示。 – nicael

[檢查複選框是否使用jQuery檢查]可能有重複（http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery） –

您應該使用'this在事件處理程序中。 $（'input：checked'）'和'$（'input'）。is（'：checked'）'只是從DOM中重新選擇事物，實際上可能不是被更改的輸入。 – AtheistP3ace

使用this可以獲取代碼中單擊複選框的上下文。如果選中其他false

$('input[type="checkbox"]').on('change', function(){ 
      var x = this.value; // x gets the value attribute of changed checkbox 
      if (this.checked){ 
       sublayers.getSubLayer(x).show(); // shows specified layer on the map 
       $('#' + x).show(); // shows id targeted submenu under the checked checkbox 
      } 
      else { 
       sublayers.getSubLayer(x).hide(); // hides sublayer on the map if unchecked 
       $('#' + x).hide(); // hides specific submenu 
      } 
    });

這裏this.checked將返回true。

來源

2015-12-21 15:12:50 void

這將工作得很好，但請注意，還有另一個問題可能會影響OP ...如果有任何其他非複選框輸入元素添加到頁面，這將不再有效。這可以通過將選擇器更改爲'input：checkbox'來避免。 –

@MattBrowne雖然我改變了選擇器，但我不認爲這將不再正常工作，如果任何其他非複選框輸入元素添加到頁面。 – void

它取決於添加的元素的值，但無論如何else代碼塊中的代碼都會不必要地運行。 –

使用$(this)代替$('input')

$('input').on('change', function(){ 
    var x = $(this).val(); // x gets the value attribute of changed checkbox 

    if ($(this).is(':checked')){ 
     sublayers.getSubLayer(x).show(); // shows specified layer on the map 
     $('#' + x).show(); // shows id targeted submenu under the checked checkbox 
    } 
    else { 
     sublayers.getSubLayer(x).hide(); // hides sublayer on the map if unchecked 
     $('#' + x).hide(); // hides specific submenu 
    } 
});

來源

2015-12-21 15:11:04

@ AtheistP3ace，感謝您的編輯。但是'var x = $（'input：checked'）。val（）;'是正確的，因爲x不需要未經檢查的元素的值。 –

複選框的值決定了他顯示的內容，因此它必須是已更改複選框的值。 '$（'input：checked'）'只查找所有選中的複選框。他顯然使用'x'的值來選擇一個直接連接到當前更改的元素的元素，而不僅僅是選中的複選框。 – AtheistP3ace

@ AtheistP3ace謝謝你是這個問題 – mmdfan

使用this而不是'input:checked'

在回調，背景被設定爲觸發事件元素。所以當change事件發生並且調用回調時，在this中存儲元素。您可以輕鬆確定是否選中了新複選框狀態使用$(this).is(":checked")

來源

2015-12-21 15:12:10

不，使用'this.checked'，而不是'$（this）.is（'：checked'）'！ – Alnitak

聽取複選框被選中/取消選中的正確方法是什麼？

回答

相關問題