check box and radio button use in asp.net and jquery , javascript ?

Question

1.00/5 (1 vote)

See more:

Dear All,

In a web page contain three check boxes: 1. laptops 2. mobiles 3.motorbikes

here once click laptop checkbox automatically display radiobutton of laptops prices under checkbox
and 2nd one click also come down mobiles prices lists and 3rd one also

this is i want please reply me any examples please

Posted 4-Sep-14 21:00pm

member1431

Updated 4-Sep-14 22:59pm

v3

Add a Solution

Comments

Sinisa Hajnal 5-Sep-14 3:28am

You have to explain it a bit better. Do your radio buttons come from some hidden div that "drops down" or you only mean lower on the page. Also, why don't you google it, there are plenty of jQuery / javascript examples?

member1431 5-Sep-14 5:00am

Dear Sinisa,

In a web page contain three check boxes: 1. laptops 2. mobiles 3.motorbikes

here once click laptop checkbox automatically display radiobutton of laptops prices under checkbox
and 2nd one click also come down mobiles prices lists and 3rd one also

this is i want please reply me any examples please

Gihan Liyanage 5-Sep-14 4:43am

Yes, You would have more information, users may not understand your requirement, its in your mind..

member1431 5-Sep-14 5:00am

Dear Gihan,

In a web page contain three check boxes: 1. laptops 2. mobiles 3.motorbikes

here once click laptop checkbox automatically display radiobutton of laptops prices under checkbox
and 2nd one click also come down mobiles prices lists and 3rd one also

this is i want please reply me any examples please

member1431 5-Sep-14 5:37am

Dear Gihan,
thanks for ur replying

Gihan Liyanage 5-Sep-14 5:43am

Did you got a point from My example???

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gihan Liyanage · Answer 1 · 2014-09-04T23:24:00

Solution 1

Thanx for giving more information. Here is build example for you.

See you can get an idea for your end.

http://jsfiddle.net/jXrxW/111/[^]

Posted 4-Sep-14 23:24pm

Gihan Liyanage

Comments

Gihan Liyanage 5-Sep-14 5:44am

Is this the requirement of you ?

member1431 5-Sep-14 5:54am

yes this is my task and output is not coming

Gihan Liyanage 5-Sep-14 5:56am

if this is the task you want, Why saying output is not coming ?? Then what you real want than this..

member1431 5-Sep-14 5:59am

Dear Gihan,
just wait am trying now please

member1431 5-Sep-14 6:06am

output is not coming in my visual studio please check and reply me

Design:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
var lastRow = null;

$(":checkbox").click(function () {
if (lastRow != null) {
lastRow.toggle();
}
lastRow = $(this).parent().next();
lastRow.toggle();
});

</script>
<style type="text/css">

.hiddenrow
{
display:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<table>
<tr>
<td>
<label for="colour">Colour</label>
</td>
<td>
<label for="small">Small</label>
<input type="checkbox" name="type" value="Small" />
</td>
<td class='hiddenrow'>
<input type="radio" name="colours" value="red" />
<input type="radio" name="colours" value="blue" />
<input type="radio" name="colours" value="yellow" />
</td>

</tr>
</table>

</div>
</form>

</body>
</html>

Gihan Liyanage 5-Sep-14 6:17am

Is this your full code of your page ?

member1431 5-Sep-14 6:21am

yes

Gihan Liyanage 5-Sep-14 6:29am

You have two html tags, two head tags, And I mean you just pasted the code on your code. need to have some knowledge how to putting scripts and html tags. please recheck the code with correct standards. If I post the full code of page for you, then you will never add next requirement as you want. I will try my best to design a full page for you. But better to have your own using my example.

Gihan Liyanage 5-Sep-14 6:01am

Ok Dude, trying your self is better, I made the base, if you can find rest of thing, that be the best

Gihan Liyanage · Answer 2 · 2014-09-05T00:39:00

HTML

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: F5F5DC	; }
    .green{ background: F5F5DC	; }
    .blue{ background: F5F5DC	; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).attr("value")=="red"){
                $(".red").toggle();
            }
            if($(this).attr("value")=="green"){
                $(".green").toggle();
            }
            if($(this).attr("value")=="blue"){
                $(".blue").toggle();
            }
        });
    });
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">
    <input type="checkbox" name="Price1" value="1">Price 1<br>
    <input type="checkbox" name="Price2" value="2">Price 2<br>
    <input type="checkbox" name="Price3" value="3">Price 3<br>
    
    </br></br></br></div>
    <div class="green box">
    <input type="checkbox" name="Price1" value="1">Price 1<br>
    <input type="checkbox" name="Price2" value="2">Price 2<br>
    <input type="checkbox" name="Price3" value="3">Price 3<br>
    </br></br></br></div>
    <div class="blue box">
    <input type="checkbox" name="Price1" value="1">Price 1<br>
    <input type="checkbox" name="Price2" value="2">Price 2<br>
    <input type="checkbox" name="Price3" value="3">Price 3<br>
    </br></br></br></div>
</body>
</html>