选中每个复选框时不显示输入字段答案

【问题标题】：input field not displaying when checked each checkbox选中每个复选框时不显示输入字段
【发布时间】：2019-08-01 07:05:21
【问题描述】：

我有两个复选框。
第一个已检查。
如果复选框被选中，则显示输入字段（它正在工作）。
当我选中另一个复选框时，第一个复选框应自动取消选中（工作）。
问题是当第一个复选框未选中时，第一个复选框生成的输入字段不会消失。

谁能指导我做错了什么？

$('#Experience').click(function(){
    if($(this).is(':checked')){
          var tb = $('<input type="number" name="totalyr" min="0" id="common" placeholder="Total Year Experience" class="form-control col-xs-3" required><input type="number" name="totalmn" min="0" id="common" class="form-control col-xs-3" placeholder="Total Month Experience" required><br><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Job Title" required><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Company Name" required><br><input type="number" id="common" name="rupee" min="0" class="form-control col-xs-3 fa fa-rupee" placeholder="Annual Salary ₹:" required>');
          $(this).after(tb)  ;
    }
    else if($(this).siblings('#common').length>0){
        $(this).siblings('#common').remove();
    }
})

/*Here for second field*/

$('#Fresher').click(function(){
    if($(this).is(':checked')){
          var tb = $('<input type="text" name="lookingfor" min="0" id="common" placeholder="Currently Looking For" class="form-control col-xs-3" required>');
          $(this).after(tb)  ;
    }
    else if($(this).siblings('#common').length>0){
        $(this).siblings('#common').remove();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
    <tr>
        <td>
            <input type="checkbox" class="radio" value="1" id="Fresher" name="" checked />
            <input type="checkbox" class="radio" value="1" id="Experience" name="" />
        </td>
    </tr>
    </table>

在这里你可以看到，如果我选择第二个复选框，那么第一个复选框生成的输入字段不会消失

【问题讨论】：

您的 sn-p 工作与您的问题描述不匹配。
如果一个复选框被选中然后另一个不会自动取消选中，请检查那里。

标签： javascript jquery html checkbox

【解决方案1】：

试试这个：

$('#Experience').click(function(){
    if($(this).is(':checked')){
        $("#Fresher").prop("checked", false);
        $("#Fresher").siblings('#common').remove();
        var tb = $('<input type="number" name="totalyr" min="0" id="common" placeholder="Total Year Experience" class="form-control col-xs-3" required><input type="number" name="totalmn" min="0" id="common" class="form-control col-xs-3" placeholder="Total Month Experience" required><br><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Job Title" required><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Company Name" required><br><input type="number" id="common" name="rupee" min="0" class="form-control col-xs-3 fa fa-rupee" placeholder="Annual Salary ₹:" required>');
        $(this).after(tb);          
    }
    else if($(this).siblings('#common').length>0){
        $(this).siblings('#common').remove();
    }
})

/*Here for second field*/

$('#Fresher').click(function(){
    if($(this).is(':checked')){
        $("#Experience").prop("checked", false);
        $("#Experience").siblings('#common').remove();
        var tb = $('<input type="text" name="lookingfor" min="0" id="common" placeholder="Currently Looking For" class="form-control col-xs-3" required>');
        $(this).after(tb);          
    }
    else if($(this).siblings('#common').length>0){
        $(this).siblings('#common').remove();
    }
});

$('#Fresher').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
    <tr>
        <td>
            <input type="checkbox" class="radio" value="1" id="Fresher" name="" />
            <input type="checkbox" class="radio" value="1" id="Experience" name="" />
        </td>
    </tr>
    </table>

Experience 的click() 函数的if 条件中添加了以下两行。

$("#Fresher").prop("checked", false);
$("#Fresher").siblings('#common').remove();

在click() 函数的if 条件中为Fresher 添加以下两行。

$("#Experience").prop("checked", false);
$("#Experience").siblings('#common').remove();

要默认显示第一个复选框的字段，只需从 HTML 输入字段中删除 checked 并为 Fresher 触发 click 函数。

建议：请在ready()函数中添加整个代码，以避免页面加载问题。

【讨论】：

它很好，但请你可以通过默认的第一个复选框来制作它，并显示输入字段。

【解决方案2】：

试试这个

$('#Experience').click(function(){
    if($(this).is(':checked')){
          var tb = $('<div id="experiencediv"><input type="number" name="totalyr" min="0" id="common" placeholder="Total Year Experience" class="form-control col-xs-3" required><input type="number" name="totalmn" min="0" id="common" class="form-control col-xs-3" placeholder="Total Month Experience" required><br><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Job Title" required><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Company Name" required><br><input type="number" id="common" name="rupee" min="0" class="form-control col-xs-3 fa fa-rupee" placeholder="Annual Salary ₹:" required></div>');
          $(this).after(tb);
           $('#Fresher').prop('checked', false);
           $('#fresherdiv').remove();
    }
    else {
        $('#experiencediv').remove();
    }
})

/*Here for second field*/

$('#Fresher').click(function(){
    if($(this).is(':checked')){
          var tb = $('<div id="fresherdiv"><input type="text" name="lookingfor" min="0" id="common" placeholder="Currently Looking For" class="form-control col-xs-3" required></div>');
          $(this).after(tb);
          $('#Experience').prop('checked', false);
           $('#experiencediv').remove();
    }
    else {
        $('#fresherdiv').remove();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
    <tr>
        <td>
            <input type="checkbox" class="radio" value="1" id="Fresher" name="" checked />
            <input type="checkbox" class="radio" value="1" id="Experience" name="" />
        </td>
    </tr>
    </table>

【讨论】：

如果一个复选框被选中，那么另一个应该取消选中每个生成的字段你也可以这样做。
@mdserver 我已经更新了我的编码。请检查。如果有任何问题，请告诉我。
@KrishnaPrashatt 我认识兄弟，但我为此尝试了很多时间，但我却无法做到，然后我才来到这里。