Increment input name using javascript - javascript

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

JavaScript show/hide div based on radio button. First instance conflicts with other one. When I select true/false on one, it applies to both

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>

how to clone a checkbox, now on unchecking hide that clonedbox and uncheck the parent and on unchecking parent hide the clonedbox

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

Selecting Checkboxes Based on Value and Parent ID

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>

Good and CLEAN way to check this? (JS + HTML)

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>

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.

Categories

Resources