點擊CheckBox的JQuery Display div

以下是我想出的代碼，這要感謝以下建議。他們中的大多數人幾乎都按照提供的方式工作，但沒有一個人能夠與現實世界保持聯繫。這裏的原因，問題的其餘部分：點擊CheckBox的JQuery Display div

內容下面介紹3個複選框和一組都應該出現和消失的複選框被選中和未選中的div。起初嘗試，他們似乎工作。從左到右檢查每個複選框顯示每個問題的內容。

但是，有時取消選中不隱藏內容。在第二個和第三個複選框的情況下，有一個測試。搜索到的DIV中有一個包含了「綠齒」和「紅齒」，這意味着第二個複選框的檢查將顯示所有使用Greentooth的人，並且第三個框的檢查將不會顯示任何更多信息，因爲Redtooth項目也與Greentooth項目一起存在。這是正確的行爲，但UNchecking the Greentooth（2nd）複選框應該隱藏僅限Greentooth的DIVS，但它不會。取消選中Redtooth DIVS可能會隱藏它們，取消選中第一個複選框可能會也可能不會。

因此，看起來JS/JQuery關注複選框的CHECKED結果，但似乎沒有遍歷剩餘的複選框來檢查它們的狀態。它是否正確？

我打了JQuery的聽和生活，但沒有取得任何進展。我需要一個循環嗎？

如果你沒有得到我在說什麼，把代碼在瀏覽器中，並嘗試選中和取消選中幾次。

感謝您的幫助。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 


</head> 
<body> 

<script type="text/javascript"> 

$(document).ready(function() 
{ 

    $("form[name=form1] input:checkbox").click(function() 
{ 
     $(".rightcolumn div:contains('"+this.value+"')").css("display", this.checked?"block":"none"); 
      }); 
      });  
</script> 

<div name="leftcolumn"> 

<form action="" method="post" name="form1" > 
    <label> 
    <input type="checkbox" id="Yoko" value="Sabretooth"> 
    Sabretooth 
    </label> 
    <label> 
    <input type="checkbox" id="Yoko-" value="Greentooth"> 
    Greentooth 
    </label> 
    <label> 
    <input type="checkbox" id="Ringo" value="Redtooth"> 
    Redtooth 
    </label> 
</form> 
    </div> 

    <div class="rightcolumn"> 
    <style type="text/css"> 
    label 
{ 
    font-weight: bold; 
} 


.hide 
{ 
    display: none; 
} 

.show 
{ 
    display: block; 
} 
    </style> 
     <div name="hider" class="hide"> 
     John Resig Sabretooth 
     </div> 
     <div name="hider" class="hide"> 
     George GreentoothMartin 
     </div> 
     <div name="hider" class="hide"> 
     Malcom John Greentooth GreentoothRedtoothSinclair 
     </div> 
     <div name="hider" class="hide"> 
     J. Ohn 
     </div> 
     <div name="hider" class="hide"> 
     George toothMartin 
     </div> 
     <div name="hider" class="hide"> 
     Malcom John Greentooth GreentoothRedtoothSinclair 
     </div> 
     <div name="hider" class="hide"> 
     J. Ohn 
     </div> 
    </div> 

</body> 
</html>

來源

2011-08-11 John Corbin

如果添加了value屬性到你的複選框，你可以用它來選擇要顯示div S：

$('input[type=checkbox]').click(function() 
{ 
    $("div:contains('"+$(this).val()+"')").toggle(); 
});

來源

2011-08-11 14:17:59 Gareth

$('input[type=checkbox]').click(function() 
{ 
$("div").each(function() 
    { 
    //a regex to match the text got from $(this).innerText or this.InnerHTML to $(this).val() 
    //if it returns true then 
    $(this).show(); 
    }) 
});

來源

2011-08-11 14:18:16 Baz1nga

我看你有多個複選框的編號相同這不是一個有效的html。但是你可以嘗試這種解決方案

<form name="form1" method="post" action=""> 
    <label> 
    <input type="checkbox" name="checkboxx1" value="john"> 
    Sabretooth</label> 
    <label> 
    <input type="checkbox" name="checkboxx2" value="ohnn"> 
    Greentooth</label> 
    <label> 
    <input type="checkbox" name="checkboxx3" value="xyz"> 
    Redtooth</label> 
</form> 

//I am setting the keyword to look for in the value field of each checkbox. 

    $(function(){ 

     $("form[name=form1] input:checkbox").click(function(){ 
     $("div:contains('"+this.value+"')").css("display", this.checked?"block":"none"); 
     }); 

    });

來源

2011-08-11 14:21:56 ShankarSangoli

點擊CheckBox的JQuery Display div

回答

相關問題