I have a div with some radio buttons, and the input names are cty_1. If i add more div the input names inside that divs should become cty_2, cty_3, etc.respectively.
Here's my code:
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
If another div is added, i want that like
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_2" id="3" value="phone">
<label for="3">phone</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_2" id="4" value="computer">
<label for="4">computer</label>
</div>
</div>
NB: i don't know javascript.
If you're using jQuery then this is pretty easy. Using the following code, every time you click "Go" a new category element will be appended and the name and id attributes will increment:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div class="container">
<btn class="btn btn-primary">Go</btn>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
</div>
</body>
<script>
$('.btn-primary').on('click',function(){
var idx = parseInt($('.category').last().index())+1;
$('.category')
.last()
.clone()
.find('input[type=radio]')
.each(function(index){
$(this)
.attr('name','cty_' + idx)
.attr('id','cty_' + idx + "_" + index)
.parent()
.find('label')
.attr('for','cty_' + idx + "_" + index)
.end()
})
.end()
.insertAfter($('.category').last());
});
</script>
Try this: updated fiddle
//Html
<div id="divMain">
</div>
//jQuery Code
var valuesArr=["car","bike","truck","Test4","Test5"];
var cityCounter=1;
var idCounter=1;
var addCategoryFlag=false;
function CallHtml(){
var html="";
for(var i=0;i<valuesArr.length;i++){
if(idCounter%2!=0){
html+='<div class="category">';
}
else{
addCategoryFlag=true;
}
html+='<div class="col-md-6">';
html+=' <input type="radio" name="cty_'+cityCounter+'" id="'+idCounter+'" value="'+valuesArr[i]+'">';
html+=' <label for="'+idCounter+'">'+valuesArr[i]+'</label>';
html+='</div>';
if(addCategoryFlag){
html+='</div>';
addCategoryFlag=false;
cityCounter++;
}
idCounter++;
}
$("#divMain").html(html);
}
CallHtml();
Related
I would like it to function separately. I've been toying with this for a while, and I have tried putting them in separate tags, changing the $(this).attr("value") to $(this).attr("name"), and applying the changes in the HTML, but I cannot figure out how I would fix this. I am using ASP.NET MVC, with jquery-3.5.1.
Note: This is not the entire file, only the relevant parts. If I am incorrect about something and the whole file is needed, it is here: https://pastebin.com/YXp1Msj3.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
<div>
<span>Enable Two Factor Authentication? (Strongly Recommended) </span>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
</div>
<div style="display:none" class="true box">
<span>What implementation of 2FA would you like?</span>
<select class="form-control" id="TotpEnabled" name="TotpEnabled">
<option value="true">Google Authenticator</option>
<option value="false">Email</option>
</select>
</div>
<div style="display:none" class="false box">
<label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
</div>
</div>
<!--End JQUERY magic/start of next-->
<div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
<div>
<label><input id="CoachEnabled" type="radio" name="athlete" value="false"> Athlete</label>
<label><input id="CoachEnabled" type="radio" name="coach" value="true"> Coach</label>
</div>
<div style="display:none" class="true box">
<div class="form-group">
<label asp-for="CoachCode"></label>
<input asp-for="CoachCode" class="form-control" />
<span asp-validation-for="CoachCode" class="text-danger"></span>
</div>
</div>
<div style="display:none" class="false box">
<!--code left in case needed in future-->
</div>
<!--End JQUERY-->
<div>
How about putting each block in a div having same class, here i have used js_option_container and using closest() to select closest parent, so that it can show or hide only div inside that container
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(this).closest(".js_option_container").find(".box").not(targetBox).hide();
$(this).closest(".js_option_container").find(targetBox).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="js_option_container">
<div>
<span>Enable Two Factor Authentication? (Strongly Recommended) </span>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
</div>
<div style="display:none" class="true box">
<span>What implementation of 2FA would you like?</span>
<select class="form-control" id="TotpEnabled" name="TotpEnabled">
<option value="true">Google Authenticator</option>
<option value="false">Email</option>
</select>
</div>
<div style="display:none" class="false box">
<label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
</div>
</div>
<div class="js_option_container">
<div>
<label><input id="CoachEnabled" type="radio" name="game" value="false"> Athlete</label>
<label><input id="CoachEnabled" type="radio" name="game" value="true"> Coach</label>
</div>
<div style="display:none" class="true box">
<div class="form-group">
<label asp-for="CoachCode"></label>
<input asp-for="CoachCode" class="form-control" />
<span asp-validation-for="CoachCode" class="text-danger"></span>
</div>
</div>
<div style="display:none" class="false box">
<!--code left in case needed in future-->
<span>Hello world</span>
</div>
<!--End JQUERY-->
<div>
$('input').on('change', function() {
var self = $(this);
if (self.is(':checked')) {
self.closest('.label-wrap').clone().addClass("clone")
.appendTo("header");
self.closest('.label-wrap').find('label').addClass("is-checked");
} else {
$('header label[for="' + self.attr('id') + '"]').replaceWith('');
self.closest('.wrap').find('.clone').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<header></header>
</div>
<form class="col-md-6">
<div class="wrap">
<div class="label-wrap">
<label for="one">Checkbox 1</label>
<input id="one" type="checkbox" />
</div>
</div>
<div class="wrap">
<div class="label-wrap">
<label for="two">Checkbox 2</label>
<input id="two" type="checkbox" />
</div>
</div>
<div class="wrap">
<div class="label-wrap">
<label for="three">Checkbox 3</label>
<input id="three" type="checkbox" />
</div>
</div>
</form>
</div>
here what i want to achieve is on checking box1 it has to create a clone element (clonedcheckbox1) and on unchecking cloned checkbox(clonedcheckbox1) hide that checkbox and uncheck parent checkbox(checkbox1)
[.]checkbox1 [.]clonedcheckbox1
[]checkbox2
[.]checkbox3 [.]clonedcheckbox3
You can delegate a change event so that your binding can be done onready to remove the clone and uncheck the original when the clone is unchecked:
$('.checkbox').on('change', function() {
var $this = $(this);
var $parent = $this.parent();
if (this.checked) {
// if checked clone without events and append
$parent.after($parent.clone().addClass('clone'));
} else {
// otherwise remove clone
$parent.next('.clone').remove();
}
});
$('.wrap').on('change', '.clone .checkbox', function() { // delegate your event for dynamically added elements
// can only be unchecked
var $this = $(this);
$this.closest('.wrap').find('.checkbox').prop('checked', false); // use prop to uncheck original
$this.parent().remove(); // remove clone
});
.wrap {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<header></header>
</div>
<form class="col-md-6">
<div class="wrap">
<div class="label-wrap">
<label for="one">Checkbox 1</label>
<input id="one" type="checkbox" class="checkbox" />
</div>
</div>
<div class="wrap">
<div class="label-wrap">
<label for="two">Checkbox 2</label>
<input id="two" type="checkbox" class="checkbox" />
</div>
</div>
<div class="wrap">
<div class="label-wrap">
<label for="three">Checkbox 3</label>
<input id="three" type="checkbox" class="checkbox" />
</div>
</div>
</form>
I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).
Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?
$("input:checkbox[value='See Notes']").attr("checked", true);
This is what my HTML looks like for each item:
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
<!-- Etc... -->
You can do something like:
$('[title="Item 1"]') //Select elemements with attribute title="Item 1"
.next() //Select the next element, which is div with class .data
.find("input:checkbox[value='" + value + "']") //Find checkbox with the value
.prop("checked", true); //Set the prop checked to true
Here is a snippet:
var item = 'Item 1';
var value = 'See Notes';
$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="field tabular">
<span class="item-data">{"Id":"123"}</span>
<div class="field-content">
<div class="title" title="Item 2">Item 2</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
I am trying to make a system that will check what radio button is pushed. (Side note there WILL always be 1 checked.) The code I have so far is rather lacking and I'm not entirely sure how to improve. Any help??
NOTE: I have multiple 'systems' that look just like this, so I'll give you just 1 chunk. That being said, there are multiple chunks like this. I need a way to make this easy on my end.
HTML:
<div class="panel">
<div class="panel-header">Storage</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE" checked>
<label class="radio" for="STORAGE">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>320GB Western Digital Caviar Blue 3.5" 7200RPM HDD</p>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE2">
<label class="radio" for="STORAGE2">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>500GB Western Digital WD5000AAKX 3.5" 7200RPM HDD</p>
<p class="money">+$55</p>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE3">
<label class="radio" for="STORAGE3">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>1TB Western Digital WD10EZEX 3.5" 7200RPM HDD</p>
<p class="money">+$55</p>
</center>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-2">
<input name="SSD" type="radio" id="SSD" checked>
<label class="radio" for="SSD">
<center>
<img src="../images/Parts/None.png" class="comp-img"><br><br>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="SSD" type="radio" id="SSD2">
<label class="radio" for="SSD2">
<center>
<img src="../images/Parts/A-DATA_SSD.png" class="comp-img"><br><br>
<p>120GB A-Data ASP550SS3-120GM-C SSD</p>
<p class="money">+$40</p>
</center>
</label>
</div>
</div>
</div>
</div>
</div>
JS:
function Check(){
if(document.getElementById('STORAGE3').checked & HDD3Clicked==0){
if (HDD2Clicked>0) {
HDD2Clicked = 0;
HDD3Clicked = 1;
}else{
HDD3Clicked = 1;
Adding(+55);
console.log("Adding");
}
}else if (document.getElementById('STORAGE2').checked & HDD2Clicked==0) {
if (HDD3Clicked>0) {
HDD2Clicked = 1;
HDD3Clicked = 0;
}else{
HDD2Clicked = 1;
Adding(+55);
console.log("Adding");
}
}else if (document.getElementById('STORAGE').checked & HDD3Clicked>0) {
HDD3Clicked = 0;
Adding(-55);
console.log("Subtracting");
}else if(document.getElementById('STORAGE').checked & HDD2Clicked>0){
HDD2Clicked = 0;
Adding(-55);
console.log("Subtracting");
}
setTimeout(function() {Check()}, 5000);
}
If you can use jQuery it's fairly simple...
var clickedID;
$(document).ready(function(){
$('radio').on('click'),function(){
clickedID = $(this).attr("id");
});
});
That will give you the id of whichever radio element has been clicked. Then you can do with it what you'd like.
var radioButtons = selectorQueryAll("input[type=radio]:checked");
for (button in radioButtons) {
console.log(button.id);
}
1) Return all checked radio buttons
2) Output their ID to console.
If you don't want to use jQuery, this is a pure javascript solution:
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="1"/>
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="2" />
<script>
var handleClick = function(e){
alert(e.value);
}
</script>
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.