Question

当我选中复选框时，会显示文本框，否则它将处于隐藏状态。但价值不是清算。帮帮我一个人。提前致谢

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

Answer 2

获取嵌套在div

下的文本框元素

修改代码以清除值

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

隐藏＆amp;取消选中该复选框后清除TextBox？

2 个答案: