JQuery Display divs on click of CheckBox
Here is the code I came up with, thanks to the suggestions below. Most all of them almost worked as offered, but none survived contact with the real world. Here's why, and the rest of the problem:
The content below presents 3 checkboxes and a set of DIVS that are supposed to appear and disappear as the checkboxes are checked and unchecked. At first try, they appear to work. Checking each checkbox from left to right reveals the content in question for each.
However, sometimes unchecking doesn't hide the content. In the case of the second and third checkbox, there is a test. One of the searched DIVs contains BOTH "Greentooth" and "Redtooth", meaning that the checking of the second checkbox will reveal all those with Greentooth and the checking of the third box will reveal nothing MORE because the Redtooth items also exist with Greentooth items. This is correct behavior, but UNchecking the Greentooth (2nd) checkbox SHOULD hide the Greentooth-only DIVS, but it does not. Unchecking the Redtooth DIVS may or may not then hide them and the unchecking the first checkbox may or may not work.
Thus, it appears that JS/JQuery pays attention to the CHECKED result of an checkbox, but doesn't appear to iterate through the remaining checkboxes to check their state. IS this correct?
I played with JQuery Listen and Live, but didn't get anywhere. Do I need a loop of some kind?
If you don't get what I'm saying, put the code in a browser and try checking and unchecking a few times.
Thanks for your assistance.
<!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 GreentoothRedtoothSincla开发者_开发问答ir
</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>
If you add a value attribute to your checkboxes, you can use that to pick the divs you want to show:
$('input[type=checkbox]').click(function()
{
$("div:contains('"+$(this).val()+"')").toggle();
});
$('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();
})
});
I see you have same ids for multiple checkboxes which is not a valid html. But you can try this solution
<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");
});
});
加载中,请稍侯......
精彩评论