jquery如何檢查div單擊複選框，更改類和顯示div

Question

我想單擊div.menuitem時，然後它應該改變類和顯示類 hidediv的複選框。當再次點擊div.menuitem時，它應該刪除該類並再次隱藏div，並取消選中該複選框。

想我想做的事：

1. 按下菜單項時，只顯示hidediv的內容。 （複選框被檢查出來）

2. 當按下菜單項的複選框應檢查

3. 當點擊菜單項被再次hidediv應該被隱藏。 （複選框選中）

4. 而且複選框應uncheched我的菜單形式的

插圖：

<div class="menuitem"> 
1.Company1 
</div> 
<div class="hidediv"> 
1.1 Company 1.1 
1.2 Company 1.2 
</div> 

<div class="menuitem"> 
1.Company2 
</div> 
<div class="hidediv"> 
1.1 Company 2.1 
1.2 Company 2.2 
</div> 

我以前的jQuery代碼，這不僅是觸發點擊複選框時。我想非常 此相似的功能，複選框也應trigghed點擊div時：

$('.menuitem input:checkbox').change(function(){ 
     if($(this).is(':checked')) { 
      $('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again. 
      $('div.hidediv').removeClass('hidediv'); 
     } else { 
      $('div.someclass').addClass('hidediv').hide(200); 
     } 
}); 
}); 

我的Jquery至今（不工作）：

$('.menuitem').click(function(e){ 
$(this).addClass('menuclicked');   
$('div.hidediv').addClass('clicked').show(200); 
      $('div.hidediv').removeClass('hidediv'); 
     } else { 
      $('div.someclass').addClass('hidediv').hide(200); 
     } 
$('.menuclicked').click(function(e){ 
$('div.someclass').addClass('hidediv').hide(200); 
}); 

我的HTML：

<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> 

     <div class="menuitem"> 
     <label for="search_company1">company1</label> 

     <input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" /> 
     </div> 
     <div class="menuitem"> 
     <label for="search_company3">company3</label> 
     <input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" /> 
     </div> 
<div class="hidediv"> 
     <div class="menuitem"> 
     <label for="search_company2">company2</label> 
     <input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" /> 
    <div> 
</div> 
    <input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" /> 
</form> 

Answer 1

我可以幫忙。我認爲你正在構造這個錯誤。你的html中有三個字段，第三個字段是隱藏的。我想當你填寫第一個你不想發生的事時，但是點擊第二個應該顯示第三個字段？

試試這個：

//Use toggle instead of .click() 
$('.menuitem').toggle(function(){ 
    $('div.hidediv').addClass('clicked').show(200); 
}, function(){ 
    $('div.hidediv').removeClass('clicked').hide(200); 
}); 

這將影響所有div的「菜單項」級，當你點擊任何三種就會切換顯示的意思/隱藏DIV的「hidediv」級。

編輯你有一對夫婦有效的答案，但我認爲你正在接近這個錯誤。如果你去嘗試其他用戶發佈的jsfiddle，那麼'javascript與我的相同 - 它揭示了我在上面討論的問題。沒有一些聰明的點擊，你不能選擇所有的三個框。每次點擊都會切換顯示/隱藏第三個複選框。我可能會建議修改你的代碼如下所示：

//Use toggle instead of .click() 
$('.toggleMenuItem').toggle(function(){ 
    $('div.hidediv').addClass('clicked').show(200); 
}, function(){ 
    $('div.hidediv').removeClass('clicked').hide(200); 
}); 

<form accept-charset="UTF-8" action="/" method="get"> 

    <div style="margin:0;padding:0;display:inline"> 
     <input name="utf8" type="hidden" value="&#x2713;" /> 
    </div> 

     <div class="menuitem"> 
      <label for="search_company1">company1</label> 
     <input name="search[company1_is_true]" type="hidden" value="0" /> 
     <input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" /> 
     </div> 

     <div class="menuitem toggleMenuItem"> 
      <label for="search_company3">company3</label> 
      <input name="search[company3_is_true]" type="hidden" value="0" /> 
     <input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" /> 
     </div> 

    <div class="hidediv"> 
      <div class="menuitem"> 
       <label for="search_company2">company2</label> 
       <input name="search[company2_is_true]" type="hidden" value="0" /> 
      <input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" /> 
      <div> 
    </div> 
     <input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" /> 
</form> 

這將使它所以只有點擊與類「.toggleMenuItem」複選框將顯示第三複選框。

Answer 2

嘗試這樣的事：

$('.menuitem').click(function(e){ 
if($(this).hasClass('menuClicked')){ 
    // Already clicked 
    $(this) 
     .removeClass('menuclicked') 
     .html(""); 
}else{ 
    // First click 
    $(this) 
     .addClass('menuclicked'); 
     .html($('#hidediv').html()); 
} 
}) 

Answer 3

這可能就是你所要尋找的：

$('.menuitem').click(function(e){ 
    $(this).toggleClass('clicked'); 
    $('div.hidediv').toggle(200); 
}); 

讓我知道，如果它缺少一個功能。

http://jsfiddle.net/citizenconn/2bCdR/