jQuery addClass example
Change class name on click in jQuery
HTML
<!DOCTYPE html>
<html>
<head>
<title>Fazla Kredi Alma</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" ></script>
</head>
<body>
<form method="post">
<div class="form-group row">
<div class="col-auto">
<label for="ad">Ad</label>
<input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
<label for="soyad">Soyad</label>
<input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
<label for="no">No</label>
<input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
<label for="course">Bölümü</label>
<input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
<label for="alKredi">Almak İstediği Kredi</label>
<input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
<label for="verKredi">Alabileceği Kredi</label>
<input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
<label for="evetKontrol">Evet</label>
<input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
<label for="hayirKontrol">Hayır</label>
<input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
<div id="ifNo"...
JavaScript
$(document).ready(function(){
//group add limit
var maxGroup = 25;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.row').length < maxGroup){
var fieldHTML = '<div class="form-group row">'+$(".rowCopy").html()+'</div>';
$('body').find('.row:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".row").remove();
});
});
function yesnoCheck() {
if (document.getElementById('evetKontrol').checked) {
document.getElementById('ifNo').style.visibility = 'hidden';
}
else document.getElementById('ifNo').style.visibility = 'visible';
}