How To Reveal Text on click of Radio Button
My goal is to build a script that will reveal different paragraphs on a page, depending on the radio button that is clicked. The first stage is to build a script that will simply reveal one piece text when one of the buttons is clicked. From reading about this it appears that you should be able to identify which button is clicked by using the ID of the input element and 'checked. Note that I'm anticipating relying on the ID's so that I know which text to reveal. However, the following code is not working and being a neophyte I'm struggling to see what's missing. Note that for what seems a simpler approach at the beginning I'm showing the text on the page and then want the text to hide when the button is clicked.
The script is
<script type="text/javascript">
$(document).ready(function() {
if($('input:checked #category1')) {
$("#hideCategory1").hide();
};
});
The input section is:
<form name="categories" action="" method="post">
<h2>Categories
</h2>
<p><input name="category" type="radio" value="errorInText" id="category1" />Content</p>
<p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p>
<p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p>
</form>
CSS is
#hideCategory1 {
visibility: visible;
}
Text Section is
<p id="hideCategory1" class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
I'd appreciate any pointers on why this might be failing and how to correct it.
Note that when I started this I was anticipating using "change" to detect which button was clicked. However, I read in several places that the "change" function sometimes has problems with IE - but I don't know.
Thanks
UPDATE: Based on Edgar's response I reversed the process and added one more line that resets all the text to hidden when a radio button is clicked. Initial tests show this to be working as expected.
$(document).ready(function() {
$("#hideCategory1, #hideCategory2, #hideCategory3").hide(); //Hide all forms
$(":radio[name='category']").click(function(){
$("#hideCategory1, #hideCategory2, #hideCategory3").hide();//on click rehide all the forms
switch($(this).attr("id")){//Select the form based on the radio button that was clicked.
case "category1": $("#hideCategory1").show(); break;
case "category2": $("#hideCategory2").show(); break;
case "category3": $("#hideCategory3").show(); break;
}
});
});
开发者_运维问答Thanks.
I didn't understand if you want to show or hide the paragraphs. Anyway, this code hides the paragraph corresponding to the radiobutton clicked. Here you have:
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(":radio[name='category']").click(function(){
$("#hideCategory1, #hideCategory2, #hideCategory3").show(); //Show all paragraphs first.
switch($(this).attr("id")){
case "category1": $("#hideCategory1").hide(); break;
case "category2": $("#hideCategory2").hide(); break;
case "category3": $("#hideCategory3").hide(); break;
}
});
});
</script>
<form name="categories" action="" method="post">
<h2>Categories
</h2>
<p><input name="category" type="radio" value="errorInText" id="category1" />Content</p>
<p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p>
<p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p>
</form>
<p id="hideCategory1"> Paragraph 1 </p>
<p id="hideCategory2"> Paragraph 2 </p>
<p id="hideCategory3"> Paragraph 3 </p>
</body>
</html>
Hope this helps. Cheers
加载中,请稍侯......
精彩评论