Develop Reference

Checked Check Progress

As you can see above, I have the data I pulled from the database and these are the radio inputs.
Each one has unique database ids and I want to check here with jquery.
For example, if the phone does not select one of the 16GB or 32GB options, I want to give a warning. Since the data coming here comes with a loop, the same thing will enter the loop.
If it is selected, I want to get the values in it.
I would be glad if you could help me.
<form action="" type="POST" onsubmit="return false;">
<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
<H4>GB</H4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3 titles">
<input class="inputs" type="radio" id="1" name="1">
<label class="btn btn-pill" style="display: inline-block;">16 GB</label>
<input class="inputs" type="radio" id="2" name="1">
<label class="btn btn-pill" style="display: inline-block;">32 GB</label>
</div>
</div>
<H4>DİSPLAY</H4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3 titles">
<input class="inputs" type="radio" id="3" name="2">
<label class="btn btn-pill" style="display: inline-block;">durable</label>
<input class="inputs" type="radio" id="4" name="2">
<label class="btn btn-pill" style="display: inline-block;">broken</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success" id="gonder">Gönder</button>
</div>
</div>
</div>
</form>

You can count the checked radios
I must suggest you give them better names and IDs
Note I gave the form an ID and removed the return false from the onsubmit
If you want to submit if ok, then my code will work
If you want to ajax the result, move the
e.preventDefault() to the top of the submit event handler
In this update I run over every title and look in the next div for radios.
You can add other elements to each
https://jsfiddle.net/mplungjan/L7nhjo10/
$(function() {
$("#myTable").on("submit", function(e) {
e.preventDefault(); // comment this to submit when ok
let errors = [],
ids = [];
$(".row h4").each(function() {
let title = $(this).text(),
$container = $(this).closest("div"), // parent
$rads = $container.find("[type=radio]");
if ($rads.length > 0) {
let $chosen = $container.find("[type=radio]:checked");
if ($chosen.length === 0) errors.push(title);
else ids.push($chosen.attr("id"));
}
})
if (errors.length > 0) {
e.preventDefault();
alert("Please choose " + errors.join(", "));
} else console.log(ids);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="myTable" action="" type="POST" onsubmit="if (!window.__cfRLUnblockHandlers) return false; return false;">
<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
<h4>Telefon Hafızası Seçin</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="1" name="1" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="1">16GB</label>
</div>
</div>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="2" name="1" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="2">32GB</label>
</div>
</div>
</div>
<div class="talepler mb-3">
<h4>Ekran Durumu Seçin</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="3" name="2" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="3">Sağlam</label>
</div>
</div>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="4" name="2" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="4">Kırık</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success" id="gonder">Gönder</button>
</div>
</div>
</div>
</form>

i will make it simple for you !
add a class to the inputs for exemple : storage or space
preview :
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3 titles">
<input class="inputs storage" type="radio" id="1" name="1">
<label class="btn btn-pill" style="display: inline-block;">16 GB</label>
<input class="inputs storage" type="radio" id="2" name="1">
<label class="btn btn-pill" style="display: inline-block;">32 GB</label>
</div>
</div>
and then by jquery you can detect selected one:
$('.storage').on('change',function(){
let selected = $('.storage:checked');
console.log(selected.val());
})
and for other inputs the same process
add new class to them exemple : phone-status or somthing else
and keep going 😀

How to implement radio button check in JSP JavaScript?

I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>

Remove prepend section when there is only one group jQuery

On click event, I'm cloning the section which is working fine. I also prepend the remove button when there is new section added.
I have only one issue, i want to remove the prepended button when there is only one section remain.
This is the code
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$('.dateofbirth').prepend($('<div style="height:0;"><a class="delete removeButton" href="#"><i class="fa fa-times"></i></a></div>'));
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="#" id="addChild" name="addchild">Add Child</a>
</div>
</div>
</div>
Can anyone help me with this how can i achieve this?
Thanks in advance.

Make the following changes:
The template should not be a child of the first form--group, it should be a sibling. If not, your dynamically added rows are regarded children of the first row. So move the template out of it, as well as the Add button.
Do not add the HTML for the removal button via code. Instead add the HTML for that button in your static HTML, both in the first row and the template
Every time you add or remove a row, and also at page load, perform the following action:
$(".removeButton").toggle($(".removeButton").length > 2)
This will count the number of delete buttons (including the one that is in the template). If that counts to just two, then hide those buttons, otherwise show them.
Here is a little snippet:
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true,true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$(".removeButton").toggle($(".removeButton").length > 2);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
$(".removeButton").toggle($(".removeButton").length > 2);
});
$(".removeButton").toggle($(".removeButton").length > 2);
});
.hide { display: none }
.field { margin-left: 20px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="javascript:;" id="addChild" name="addchild">Add Child</a>
</div>
</div>

Show hidden fields when checkbox is checked?

Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS Code :-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.

Try this
on your check box's onchange event call function onchange="showHiddenField(this)"
and function is like
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}

Use javascript function to make it.
function toggleFields(boxId, checkboxId) {
var checkbox = document.getElementById(checkboxId);
var box = document.getElementById(boxId);
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox1" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox2" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes
var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Yes you can do this. Solution in below code. i did this using JQuery.
$('input[type="checkbox"]').click(function(){
console.log(this);
// $(this).parent().next().css('display','block');
$(this).parent().next().toggle('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"
id="checkbox" replace with class="checkbox"
in Jquery
$(document).ready(function(){
$(".checkbox").change(function(){
if($(this).prop("checked")){
$(this).parents(".row").find(".box").show();
}else{
$(this).parents(".row").find(".box").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.
Note : The id should be unique for each element.
var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

The most narrowed (static) suggestion from your code:
$(document).ready(function() {
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
Use class attribute to get dynamic process.

Tested on google Chrome works.
gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string
HTML :
<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>
Javascript :
function display_hidden_field(checkbox){
var box_id = checkbox.id;
var search_pattern = /checkbox(.*?)$/g;
var number = search_pattern.exec(box_id);
number = number[1];
box_id = 'box'+number;
var box = document.getElementById(box_id);
if(checkbox.checked){
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}

You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_2" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
<script>
function myfunction(obj)
{
var element_index = obj.id.split("_");
console.log('box_'+element_index[1]);
var box = document.getElementById('box_'+element_index[1]);
if(obj.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
}
</script>
Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.

Unexpected behavior of Dropdown field when using of Slideup and Slidedown jQuery function on another field

I am getting an unexpected behavior on my dropdown input field when the Slideup jquery function works simultaneously. Requirement is that when user writes in the CustomerName text field, a message should appear above it and when user comes out of that field the message should disappear. Everything works fine but when I click on the dropdown box to select a state, I am getting a gap between the dropdown field and the selectable List. How can I remove this gap?
HTML Code-
<div class="alert alert-warning lbls" id="Warning-alert" hidden="hidden">
If customer is an active , please contact your.
</div>
<div class="innercontainer">
<div class='row marginbtm-10'>
<div class='col-lg-6 col-sm-6 col-md-6'>
<div class="row">
<div class='row'>
<div class='col-lg-5 col-md-5 col-sm-6'>
<label class="lbls mandatory-filed">Customer Name</label>
</div>
<div class='col-lg-7 col-md-7 col-sm-6'>
<input id="txtCustomerNamer" type="text" data-ng-model="CustomerInfo.CustomerName" class="form-control" maxlength="60" placeholder="Customer Name" />
</div>
</div>
</div>
</div>
<div class='col-lg-3 col-md-3 col-sm-3'>
<div class='row'>
<div class='col-lg-5 col-md-5 col-sm-6 col-xs-12'>
<label class="lbls mandatory-filed">Zip Code</label>
</div>
<div class='col-lg-7 col-md-7 col-sm-6 col-xs-12'>
<input id="txtZipcode" type="text" data-ng-model="CustomerInfo.ZipCode" class="form-control" placeholder="Zip Code" maxlength="5" />
</div>
</div>
</div>
<div class='col-lg-3 col-md-3 col-sm-3'>
<div class='row'>
<div class='col-lg-5 col-sm-4 col-md-5'>
<label class="lbls mandatory-filed">State</label>
</div>
<div class='col-lg-7 col-md-7 col-sm-8'>
<select id="ddlSitusStates" class="form-control dropdown" data-ng-model="CustomerInfo.SelectedSitusState" title="{{CustomerInfo.SelectedSitusState.SitusStateName}}"
data-ng-options="situsState.SitusStateName for situsState in SitusStates track by situsState.SitusStateId">
<option value="">Select</option>
</select>
</div>
</div>
</div>
</div>
jquery code-
$(document).ready(function () {
$("#txtCustomerNamer").focusin(function () {
$("#Warning-alert").slideDown(500);
});
$("#txtCustomerNamer").focusout(function () {
$("#Warning-alert").show().slideUp(200);
});
});
Image with Slidedown function-
Image with Slideup function-