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

Your snippet's working and the description of your question do not match. — Krishna Prashatt
– Krishna Prashatt, Commented Aug 1, 2019 at 7:10
please check there if one checkbox is checked then another one is not automatically unchecking. — md server
– md server, Commented Aug 1, 2019 at 7:17

Sami Ahmed Siddiqui · Accepted Answer · 2019-08-01 07:41:38Z

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.

Its good but please can u make it by defualt first checkbox should checked as well as show input field.

Mohammad Ali Rony · Accepted Answer · 2019-08-01 07:27:35Z

1

try this

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

edited Aug 1, 2019 at 7:27

answered Aug 1, 2019 at 7:16

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

3 Comments

md server Over a year ago

if one checkbox is checked then another one should unchecked with each generated field also can u do that.

Mohammad Ali Rony Over a year ago

@mdserver I have updated my coding. please check. if any problem please let me know.

md server Over a year ago

@KrishnaPrashatt i knew bro but i tried so many time for this when didn't become possible by me then only i came here.

Collectives™ on Stack Overflow

input field not displaying when checked each checkbox

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related