隐藏&清除复选框未选中时的文本框？ [英] Hide & Clear the TextBox when the checkbox is unchecked?

问题描述

当我检查复选框时，将显示文本框，否则它将处于隐藏状态。但价值并不清晰。帮助我一个人。提前致谢

HTML

  < div class =munna> 
< input id =chk_1type =checkboxvalue =1onClick =document.getElementById（'cutting_price'）。focus（）; chk_box（this.id）; onChange =chk_box（this.id）>剪切
< div id =chk_1_boxstyle =display：none;> 
 Price：< input type =textvalue =size =5name =cutting_priceid =cutting_priceonChange =post_production（）/> 
< / div> 
< / div> 
 
< div class =munna> 
< input id =chk_2type =checkboxvalue =1onClick =document.getElementById（'lamination_price'）。focus（）; chk_box（this.id）;> Lamination 
< div id =chk_2_boxstyle =display：none;> 
 Price：
< input type =textsize =5value =name =lamination_priceid =lamination_priceonChange =post_production（）/> 
< / div> 
< / div> 
 
< div class =munna> 
< input id =chk_3type =checkboxvalue =1onChange =chk_box（this.id）; onClick =document.getElementById（'die_making_price'）。focus（）; chk_box（this.id）;>模具制作
< div id =chk_3_boxstyle =display：none;> 
 Price：
< input type =textsize =5value =name =die_making_priceid =die_making_priceonChange =post_production（）/> 
< / div> 
< / div> 
  

JavaScript
< pre $ 函数chk_box（chk）
{
if（document.getElementById（chk）.checked）
{
var chk2 = chk +' _框';
document.getElementById（chk2）.style.display ='block';
}
else
{
var chk2 = chk +'_ box';
document.getElementById（chk2）.style.display ='none';
document.getElementById（chk2）.value ='';
}
}


解决方案

嵌套在 div

下的textbox元素会修改您的代码以将值清除为

  document.getElementById（chk2）.getElementsByTagName（'input'）[0] .value =''; 
  

When i check the checkbox the textbox is displayed else it will be in hidden. But the value is not clearing. Help me someone. Thanks in advance

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

解决方案

Fetch the textbox element that is nested under div

modify your code to clear the value as

document.getElementById(chk2).getElementsByTagName('input')[0].value='';

这篇关于隐藏&amp;清除复选框未选中时的文本框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！