control the textfield from checkbox

dear i have 2 text and 2 checkbox:

<input type="checkbox" id="class1">
<input type="checkbox" id="class2">

<div id="hidden">
<input type="text" id="valclass1">
<input type="text" id="valclass2">
</div>

i want if i checked at "class1" then click show button "va开发者_运维问答lclass1" can show. but if not checked, it hidden.how do i do that?

I would do it like this:

<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="javascript/text">
$(function()
{
    $('#ShowButton').click(function()
    {
        if($('#class1').is(':checked')) $('#valclass1').show();
        if($('#class2').is(':checked')) $('#valclass2').show();
    });
});
</script>

<input type="checkbox" id="class1">
<input type="checkbox" id="class2">

<input type="button" id="ShowButton" />

<input type="text" id="valclass1" style="display: none">
<input type="text" id="valclass2" style="display: none">

It would work, but probably doesn't answer your question. You need to learn more about JavaScript to be able to roll your own solution.

Check out W3C's JavaScript tutorial