基於複選框值的jQuery顯示 - 隱藏DIV

使用AJAX我用一堆複選框填充DIV（每個複選框都有自己的唯一ID）。這些ID是「projectID1」，「projectID2」，「projectID3」等......我給所有複選框提供了一類「pChk」。基於複選框值的jQuery顯示 - 隱藏DIV

我的最終目標是顯示包含提交按鈕的DIV，如果任何複選框被選中。包含提交按鈕顯示的DIV隱藏的唯一時間是如果所有複選框都未選中。

但是，我已經拿出下面的代碼顯示/隱藏每個複選框實例的提交按鈕DIV。換句話說，如果我有三個複選框CHECKED，並且我選中其中一個，則提交按鈕DIV將隱藏。

您的專家意見是歡迎！

function checkUncheck() { 
    $('.pChk').click(function() { 
     if (this.checked) { 
      $("#ProjectListButton").show(); 
     } else { 
      $("#ProjectListButton").hide(); 
     } 
    }); 
}

來源

2010-12-14 mickormick

請記住，如果你*秀*的與JS提交按鈕，你也應該*隱藏*與JS按鈕，所以人們沒有JavaScript啓用可以*仍然*使用該形式。以屏幕閱讀器爲例。 – 2010-12-14 21:21:53

[根據複選框值切換div]可能的重複（http://stackoverflow.com/questions/4337378/toggle-div-based-on-checkbox-value） – 2016-04-22 17:57:02

這是因爲您只是檢查當前的複選框。

將其更改爲

function checkUncheck() { 
    $('.pChk').click(function() { 
     if ($('.pChk:checked').length > 0) { 
      $("#ProjectListButton").show(); 
     } else { 
      $("#ProjectListButton").hide(); 
     } 
    }); 
}

，以檢查是否有任何的複選框被選中（很多檢查在這一行...）。

參考：http://api.jquery.com/checked-selector/

來源

2010-12-14 21:18:06

非常感謝！像魅力一樣工作！有些人只是得到它而像我這樣的其他人奮鬥！ – mickormick 2010-12-14 22:24:11

如果我們刪除「.length> 0」，如果有2個或更多複選框和2個或更多內容顯示和隱藏，它將不起作用。但是，如果添加「.length> 0」，它就像魅力一樣。你能解釋一下這個邏輯嗎（會很簡單，但我無法理解）。 – Veer 2017-04-10 08:41:25

@veer是因爲$（'。pChk：checked'）'總是返回一個jquery對象，不管是否找到了匹配的項目。並且對象在'if'檢查中評估爲真。 – 2017-04-11 13:33:58

你可能會考慮使用:checked selector，的jQuery提供。像這樣的：

$('.pChk').click(function() { 
    if($('.pChk:checked').length > 0) { 
     $("#ProjectListButton").show(); 
    } else { 
     $("#ProjectListButton").hide(); 
    } 
});

來源

2010-12-14 21:20:15 Lee

我自己使用這種方法。 – mirzu 2011-01-27 20:41:30

雖然這是舊的，如果有人再次遇到這（通過搜索）。使用jQuery 1.7正確答案起現：

$('.pChk').click(function() { 
    if($(this).is(':checked')) { 
     $("#ProjectListButton").show(); 
    } else { 
     $("#ProjectListButton").hide(); 
    } 
});

來源

2012-04-16 11:08:03 raymosley

我真的不知道爲什麼這是如此upvoted ..這是錯誤的。你只是檢查當前的項目，而OP是特別要求只有*** *** ***'.pChk'元素未被選中才會發生隱藏。你剛剛重寫了問題的代碼（*更好，因爲直接使用'this.checked'而不是使用jquery，即使是那樣.. *） – 2014-01-27 10:02:49

是的，它錯了... – 2014-05-20 09:11:12

ebdiv設置style="display:none;"

其作品中表現出&隱藏

$(document).ready(function(){ 
    $("#eb").click(function(){ 
     $("#ebdiv").toggle(); 
    }); 

});

來源

2012-06-13 13:17:18 Vaishu

使用jQuery支撐

$('#yourCheckbox').change(function(){ 
    if($(this).prop("checked")) { 
    $('#showDiv').show(); 
    } else { 
    $('#hideDiv').hide(); 
    } 
});

來源

2013-09-03 10:30:10

嘗試這

$('.yourchkboxes').change(function(){ 
    $('.yourbutton').toggle($('.yourchkboxes:checked').length > 0); 
});

所以它會檢查是否至少有一個複選框被選中。

來源

2014-05-20 09:20:00

對於所有使用扁平紅色平綠色插件的人來說，由於這個插件上面的答案不會奏效，所以請小心！

在這種情況下，使用onchange =「do_your_stuff（）;」在標籤上，例如：您的複選框這裏

它不工作的原因是，這個Jquery圍繞真正的複選框創建了很多對象，所以你看不到它是否被改變。

但是，如果有人點擊直線上複選框，將無法正常工作：「（

來源

2017-01-23 17:58:01

基於複選框值的jQuery顯示 - 隱藏DIV

回答

相關問題