jquery複選框顯示隱藏div不工作

我想使用jQuery的顯示/隱藏來控制基於複選框被選中或否的div的顯示。（我也嘗試過使用CSS無法顯示/塊的方法。）jquery複選框顯示隱藏div不工作

我可以得到代碼來檢查複選框然後讓div顯示或隱藏，但是我無法得到我的「全部檢查」按鈕也起作用，如果特定複選框被選中，則相應地顯示/隱藏div。

我把它變成的jsfiddle這裏：https://jsfiddle.net/gamehendgeVA/2jszhdzw/

是否有人可以幫助我獲得兩個單選框選中顯示/隱藏連同工作「檢查所有」按鈕顯示和隱藏基於特定的複選框的div正在檢查？

感謝您的任何幫助！

HTML

<div class="panel panel-info"> 
<div class="panel-heading"><h3 class="panel-title">Search These Domains</h3></div> 
<div class="panel-body"> 
<input type="button" class="btn btn-primary btn-xs" data-toggle="button" value="all domains" id="checkAllDomains" /> 
<br /> 
<div class="col-md-6"> 
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox" id="domainCheckbox1">One</label></div> 
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Two</label></div> 
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Three</label></div> 
</div> 
<div class="col-md-6"> 
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Four</label></div> 
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Five</label></div> 
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Six</label></div> 
</div> 
</div> <!-- /.panel-body --> 
</div> <!-- /.panel --> 
<div class="panel panel-info" id="div1"> 
<div class="panel-heading"><h3 class="panel-title">Search These Divisions</h3></div> 
<div class="panel-body"> 
THIS DIV SHOULD ONLY APPEAR WHEN "#domainCheckbox1" is checked, either when checked on its own, or checked when the "all domains" button checks it. 
</div> <!-- /.panel-body --> 
</div> <!-- /.panel -->

$('#div1').hide(); 
$('#domainCheckbox1').change(function(){ 
    if($(this).prop("checked")) { 
    $('#div1').show(); 
    } else { 
    $('#div1').hide(); 
    } 
}); 
///////// 
$(function() { 
    function updateCheckAllButtonDomains() { 
     if ($('.searchDomainCheckbox:checked').length == $('.searchDomainCheckbox').length) { 
     $('#checkAllDomains').val('uncheck all').data('check', false); 
    } else { 
     $('#checkAllDomains').val('all domains').data('check', true); 
    }  
} 
$('.searchDomainCheckbox').change(function() { 
    updateCheckAllButtonDomains(); 
}); 
$('#checkAllDomains').click(function() { 
    $('.searchDomainCheckbox').prop('checked', $(this).data('check')); 
    updateCheckAllButtonDomains(); 
}); 
updateCheckAllButtonDomains(); 
});

來源

2015-10-25 gamehendgeVA

這是因爲searchDomainCheckbox的事件已經被連接到的元素。因此，您必須手動觸發，如下所示：$('.searchDomainCheckbox').trigger('change');

將此代碼放在#checkAllDomains的事件點擊上，並很高興！

這是我的解決方案：

$('#checkAllDomains').click(function() { 
    $('.searchDomainCheckbox').prop('checked', $(this).data('check')); 
    $('.searchDomainCheckbox').trigger('change'); 
    updateCheckAllButtonDomains(); 
});

注意：把觸發內部updateCheckAllButtonDomains的（）引起「最大調用堆棧大小超過了」。

來源

2015-10-25 03:39:12

非常感謝。 ..以上Diptox完全是正確的軌道，但我有一些奇怪的問題，並沒有一直顯示......你的代碼（觸發器改變的位置）做了一個完美的伎倆，我的表格現在看起來很穩定......感謝你非常想幫助我...... :-) – gamehendgeVA

Demo

只是觸發Change事件，它應該工作

function updateCheckAllButtonDomains() 
{ 
    if ($('.searchDomainCheckbox:checked').length == $('.searchDomainCheckbox').length) 
     $('#checkAllDomains').val('uncheck all').data('check', false); 
    else 
     $('#checkAllDomains').val('all domains').data('check', true); 

    $("input.searchDomainCheckbox").trigger("change"); 
}

來源

2015-10-25 03:06:46 Diptox

謝謝你sooo，工作就像一個魅力......（小方面注意，你的代碼在那裏有「更改」行之前else），一旦我像你的小提琴後移動它，很好...感謝你這麼多，我不知道這件事情，現在就讀它:-) – gamehendgeVA

：D觸發器應該在if和else之後，如果全部被檢查，它會觸發 – Diptox

這裏是jsFiddle

HTML

<div class="panel panel-info"> 
<div class="panel-heading"> 
    <h3 class="panel-title">Search These Domains</h3> 
</div> 
<div class="panel-body"> 
    <input type="checkbox" id="checkAllDomains" /> 
    <label>Check All</label> 
    <br /> 
    <div class="col-md-6"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="searchDomainCheckbox">One</label> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="searchDomainCheckbox">Two</label> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="searchDomainCheckbox">Three</label> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="searchDomainCheckbox">Four</label> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="searchDomainCheckbox">Five</label> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="searchDomainCheckbox">Six</label> 
     </div> 
    </div> 
</div> 
<!-- /.panel-body -->

JAVASCRIPT

$('#checkAllDomains').click(function (event) { 
    if (this.checked) { 
     $('.searchDomainCheckbox').each(function() { 
      this.checked = true; 
     }); 
    } else { 
     $('.searchDomainCheckbox').each(function() { 
      this.checked = false; 
     }); 
    } 
});

來源

2015-10-25 03:08:55 Florin

jquery複選框顯示隱藏div不工作

回答

相關問題