input field not displaying when checked each checkbox

Question

I have two checkboxes.
The first one is already checked.
If the checkbox is checked, then display the input field(it is working).
When I check the other checkbox then the first checkbox should uncheck automatically(working).
The problem is when the first checkbox is unchecked, then the input field which is generated by first checkbox is not disappearing.

Could anyone guide me on what I am doing wrong?

$('#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>

Here u can see, if i select second checkbox then first checkbox generated input field is not disappearing

Sami Ahmed Siddiqui · Accepted Answer

Try this:

$('#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>

Below 2 lines are added in the if condition of click() function for Experience.

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

Below 2 lines are added in the if condition of click() function for Fresher.

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

To show the field for by default first checkbox just remove checked from the HTML input field and trigger click function for Fresher.

Suggestions: Please add the whole code in ready() function to avoid the issues on page load.

input field not displaying when checked each checkbox

Tags:

javascript

html

jquery

checkbox

md server

1 Answers

Sami Ahmed Siddiqui

Recent Activity

Donate For Us

input field not displaying when checked each checkbox

Tags:

javascript

html

jquery

checkbox

md server

1 Answers

Sami Ahmed Siddiqui

Related questions

Recent Activity

Donate For Us