jeudi 1 août 2019

input field not displaying when checked each checkbox

  1. I have Two checkbox
  2. First one checkbox already checked
  3. if checkbox check then display the input field( it is working).
  4. when im checked other checkbox then first checkbox should unchecked automatically(working)
  5. The problem is when the first unchecked then input field are not disappearing which is generated by first checkbox. here is my code.
$('#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




Aucun commentaire:

Enregistrer un commentaire