取消选中复选框时隐藏和清除文本框

Hide & Clear the TextBox when the checkbox is unchecked?

本文关键字：清除 文本 隐藏 复选框 取消      更新时间：2023-09-26

当我选中复选框时，将显示文本框，否则它将处于隐藏状态。但价值并没有被清除。帮帮我一个人。提前致谢

.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='';
    }
}

试试这个

.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(); 
        }
    });
});

演示

获取嵌套在 div 下的文本框元素

修改代码以将值清除为

document.getElementById(chk2).getElementsByTagName('input')[0].value='';
相关文章：