单击复选框后,将出现一个文本框

after clicking on checkbox a text box will appear

本文关键字:一个 文本 复选框 单击      更新时间:2023-09-26
<script type="text/javascript" language="javascript">
function enabletxt(){
    document.getElementById("chkAssociation").innerHTML="<input type='text' value=''>"
}
</script>
Hobbies:  <input type="checkbox" name="hobbies" value="Dancing">Dancing
<input type="checkbox" name="hobbies" value="Painting">Painting
<input type="checkbox" name="hobbies" value="Others" onChange="javascript:enabletxt();" ID="chkAssociation"  runat="server" />Others

你能做的:

function enableText(checkBox) {
    if (checkBox.nextSibling.tagName != 'INPUT') {
        var input = document.createElement('input');
        input.type = "text";
        checkBox.parentNode.insertBefore(input, checkBox.nextSibling);
    }
}

<input type="checkbox" name="hobbies" value="Dancing" onchange="enableText(this)">
    <input type="checkbox" name="hobbies" value="Dancing">Dancing
    <input type="checkbox" name="hobbies" value="Painting">Painting
    <input type="checkbox" name="hobbies" value="Others"  onclick="OnChangeCheckbox (this)"ID="chkAssociation"/>Others
    <input type="textbox" Id="txtToggle" style="display:none"/>
    <script type="text/javascript">
    function OnChangeCheckbox (checkbox) {
        if (checkbox.checked) {
            document.getElementById('txtToggle').style.display="block"; 
        }
        else {
            document.getElementById('txtToggle').style.display="none"; 
        }
    }
   </script>

这是你要找的吗?

<script type="text/javascript">
    function toggleOtherTextboxVisible()
    {
        var check = document.getElementById('OtherCheckBox');
        if (check.checked) {
            document.getElementById('OtherTextBox').style.display = 'block';
        }
        else
            document.getElementById('OtherTextBox').style.display = 'none';                
    }
</script>
<div>
    <input id="OtherCheckBox" type="checkbox" value="Others" onchange="javascript:toggleOtherTextboxVisible()" />Others
    <input id="OtherTextBox" type="text" style="display:none" />
</div>
<script type="text/javascript">
       function enabletxt(){
        if(document.getElementById('chkAssociation').checked) {
           $('#chkAssociation2').html('<input type="text" value="">');
        }else{
           $('#chkAssociation2').html('');
        }   
       }
    </script>
    <input type="checkbox" name="hobbies" value="Dancing">Dancing
    <input type="checkbox" name="hobbies" value="Painting">Painting
    <input type="checkbox" name="hobbies" value="Others" onChange="javascript:enabletxt();" ID="chkAssociation"  runat="server" />Others
    <div id= "chkAssociation2"></div>