javascript - 未选中复选框时隐藏并清除文本框？

Question

当我选中该复选框时，文本框会显示，否则它将被隐藏。但值(value)并未清算。帮帮我吧。提前致谢

HTML

<div class="munna">                    
    <input id="chk_1"  type="checkbox"  value="1" onClick="document.getElementById('cutting_price').focus();chk_box(this.id);"  onChange="chk_box(this.id)">Cutting
    <div id="chk_1_box" style="display:none ;">
        Price :<input type="text" value="" size="5"  name="cutting_price" id="cutting_price" onChange="post_production()" />            
    </div>
</div>

<div class="munna">                    
    <input id="chk_2"  type="checkbox"  value="1" onClick="document.getElementById('lamination_price').focus();chk_box(this.id);">Lamination
    <div id="chk_2_box" style="display:none;">
        Price :
        <input type="text" size="5" value=""  name="lamination_price" id="lamination_price" onChange="post_production()" />
    </div>
</div>

<div class="munna">                    
    <input id="chk_3"  type="checkbox"  value="1" onChange="chk_box(this.id);" onClick="document.getElementById('die_making_price').focus();chk_box(this.id);">Die Making
    <div id="chk_3_box" style="display:none;">
        Price :
        <input type="text" size="5" value=""  name="die_making_price" id="die_making_price" onChange="post_production()" />
    </div>
</div>

JavaScript

function chk_box(chk)
{
    if(document.getElementById(chk).checked)
    {
        var chk2 = chk+'_box';
        document.getElementById(chk2).style.display='block';
    }
    else
    {
        var chk2 = chk+'_box';
        document.getElementById(chk2).style.display='none';
        document.getElementById(chk2).value='';
    }
}

Answer 1

试试这个

HTML

<div class="munna">                    
<input id="chk_1"  type="checkbox"  value="1" onClick="document.getElementById('cutting_price').focus();" >Cutting
<div id="chk_1_box" style="display:none ;">
Price :<input type="text" value="" size="5"  name="cutting_price" id="cutting_price" onChange="post_production()" />            
</div>
</div>

<div class="munna">                    
<input id="chk_2"  type="checkbox"  value="1" onClick="document.getElementById('lamination_price').focus();">Lamination
<div id="chk_2_box" style="display:none;">
Price :
<input type="text" size="5" value=""  name="lamination_price" id="lamination_price" onChange="post_production()" />
</div>
</div>

<div class="munna">                    
<input id="chk_3"  type="checkbox"  value="1" onClick="document.getElementById('die_making_price').focus();">Die Making
<div id="chk_3_box" style="display:none;">
Price :
<input type="text" size="5" value=""  name="die_making_price" id="die_making_price" onChange="post_production()" />
</div>
</div>

JS

$(function(){
    $("input[type='checkbox']").change(function(){

        if($(this).is(":checked"))
        {
            $("#"+$(this).attr("id")+"_box").show();
        }
        else{
          $("#"+$(this).attr("id")+"_box").find("input[type='text']").val("")  ;
          $("#"+$(this).attr("id")+"_box").hide(); 
        }
    });
});

Demo