Access the nested path of the input elements - javascript

HTML:
<div id="quiz">
<div id="question">
<p id="quiz-txt">Your Name is:</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Bob" value="Bob" class="options">
<label for="Bob">Bob</label>
</div>
<div id="ans">
<input type="checkbox" id="David" value="David" class="options">
<label for="David">David</label>
</div>
<div id="ans">
<input type="checkbox" id="Jack" value="Jack" class="options">
<label for="Jack">Jack</label>
</div>
</ul>
</div>
.
.
.
.
<div id="question">
<p id="quiz-txt">This is the final question.</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Yes" value="Yes" class="options">
<label for="Yes">Yes</label>
</div>
<div id="ans">
<input type="checkbox" id="No" value="No" class="options">
<label for="No">No</label>
</div>
</ul>
</div>
There are about 10 of these divs (questions) which are created on the go (getting an array from the server).
So, my question is how I can get the values of checkboxes that are checked?
Here is what I tried in my JavaScript:
$('#quiz').children('#question').children('#quiz-opt').children('#ans').children('.options:checked').each(function () {
console.log($(this).val());
});


This (albeit jQuery free) solution worked for me. Check some of the boxes and then click the check button
function check() {
document.querySelectorAll(".options:checked").forEach(el => {
console.log(el.value);
});
console.log("-----------------------");
}
<div id="quiz">
<div id="question">
<p id="quiz-txt">Your Name is:</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Bob" value="Bob" class="options">
<label for="Bob">Bob</label>
</div>
<div id="ans">
<input type="checkbox" id="David" value="David" class="options">
<label for="David">David</label>
</div>
<div id="ans">
<input type="checkbox" id="Jack" value="Jack" class="options">
<label for="Jack">Jack</label>
</div>
</ul>
</div>
.
.
.
.
<div id="question">
<p id="quiz-txt">This is the final question.</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Yes" value="Yes" class="options">
<label for="Yes">Yes</label>
</div>
<div id="ans">
<input type="checkbox" id="No" value="No" class="options">
<label for="No">No</label>
</div>
</ul>
</div>
<button onClick="check()">Check values</button>


You don't need all that path, the last bit of it is enough $('.options:checked'). Also no need to convert this into a jQuery object, simply access its JavaScript value property:
function check() {
$('.options:checked').each(function() {
console.log(this.value);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quiz">
<div id="question">
<p id="quiz-txt">Your Name is:</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Bob" value="Bob" class="options">
<label for="Bob">Bob</label>
</div>
<div id="ans">
<input type="checkbox" id="David" value="David" class="options">
<label for="David">David</label>
</div>
<div id="ans">
<input type="checkbox" id="Jack" value="Jack" class="options">
<label for="Jack">Jack</label>
</div>
</ul>
</div>
. . . .
<div id="question">
<p id="quiz-txt">This is the final question.</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Yes" value="Yes" class="options">
<label for="Yes">Yes</label>
</div>
<div id="ans">
<input type="checkbox" id="No" value="No" class="options">
<label for="No">No</label>
</div>
</ul>
</div>
<button type="button" onclick="check()">Check</button>

Related

Javascript Update URL With Options From Multiple Form Checkboxes

I have a form with 2 sets of checkboxes with a view this could be 3 or 4 down the line.
For this question I have 2 which each have >5 checkboxes and multiple items can be selected in those check boxes.
When a user selects the checkboxes I want to update the URL and refresh with parameters which I'll be using to filter content.
URL I want:
example.com/category/?content=video_static&channel=facebook-ads_instagram-ads
URL I'm getting:
example.com/category/?content=video&content=static&channel=facebook-ads&channel=instagram-ads
I'm not currently changing the URL with javascript but just a form input and submit. I'm thinking I'll need to use Javascript to enable better URL handling.
I want to use undercores to then seperate the checkbox selections which at the minute I'm happy to just refresh the page.
I appreciate this may be very simple for some but Javascript isn't my thing and I have about 20 tabs open trying. Any help is appreciated.
Here is example form (please ignore the tweo different checkbox HTML formats, I hadn't updated the second before this):
<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="static" name="content" value="static">
<label for="static">static</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="carousel" name="content" value="carousel">
<label for="carousel">carousel</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="video" name="content" value="video">
<label for="video">video</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="gif" name="content" value="gif">
<label for="gif">gif</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="dpa" name="content" value="dpa">
<label for="dpa">dpa</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="stories" name="content" value="stories">
<label for="stories">stories</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="influencer" name="content" value="influencer">
<label for="influencer">influencer</label>
</div>
</div>
<div class="list-group">
<h3>Channels</h3>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="facebook-ads">
facebook-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="instagram-ads">
instagram-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="google-ads">
google-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="microsoft-ads">
microsoft-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="tiktok-ads">
tiktok-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="snapchat-ads">
snapchat-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="youtube-ads">
youtube-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="pinterest-ads">
pinterest-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="podcast-ads">
podcast-ads
</label>
</div>
</div>
<button id="select">Apply Filter</button>
</form>

The following should do it:
document.querySelector("form").onsubmit=ev=>{
ev.preventDefault();
let o={};
ev.target.querySelectorAll("[name]:checked").forEach(el=>{
(o[el.name]=o[el.name]||[]).push(el.value)})
console.log(location.pathname+"?"+
Object.entries(o).map(([v,f])=>
v+"="+f.join("_")).join("&")
);
}
<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="static" name="content" value="static">
<label for="static">static</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="carousel" name="content" value="carousel">
<label for="carousel">carousel</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="video" name="content" value="video">
<label for="video">video</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="gif" name="content" value="gif">
<label for="gif">gif</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="dpa" name="content" value="dpa">
<label for="dpa">dpa</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="stories" name="content" value="stories">
<label for="stories">stories</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="influencer" name="content" value="influencer">
<label for="influencer">influencer</label>
</div>
</div>
<div class="list-group">
<h3>Channels</h3>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="facebook-ads">
facebook-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="instagram-ads">
instagram-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="google-ads">
google-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="microsoft-ads">
microsoft-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="tiktok-ads">
tiktok-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="snapchat-ads">
snapchat-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="youtube-ads">
youtube-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="pinterest-ads">
pinterest-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="podcast-ads">
podcast-ads
</label>
</div>
</div>
<button id="select">Apply Filter</button>
</form>
Instead of only showing the new location string with console.log() you should of course use it to apply your filter settings, either through an AJAX call or simply by replacing the current document.location.href.

programmatically hide Bootstrap accordion

In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>

Perform certain action when radio button is checked

How to show input with class searchFilter below radio button only when that radio button is checked and hide all the others .searchFilter inputs?
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>

No need for javascript for this, you can do this with css:
.searchFilter {
display: none;
/* hide search filters */
}
input[type=radio]:checked~.searchFilter {
display: block;
/* show filters that appear after a checked input */
}
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example1">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example2">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example3">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>

Do this way:
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
$('.searchFilter').hide();
$('input[type=radio]:checked').next('.searchFilter:first').show();
});
});

This should do the trick.
$(document).ready(function(){
$('.filter-option').children('input[type=radio]').on('change', function(){
$(this).parents('.details').find('input[type=radio]').each(function(){
$(this).is(':checked') ? $(this).siblings('.searchFilter').show() : $(this).siblings('.searchFilter').hide();
});
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example4" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>

Please check my code it might help you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//For first form
//select last radiobutton as default
$("form").find(".searchFilter").attr("disabled",true).val("")
$("form").find(".searchFilter").last().attr("disabled",false)
//On radiobuttion selection change
$('input[type=radio]').on('change',function(){
$("form").find(".searchFilter").attr("disabled",true).val("");
$(this).siblings(".searchFilter").attr("disabled",false)
});
});
</script>
</head>
<body>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form >
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
</body>
</html>

Checkbox with Tabs

I'm trying to make the tabs appear based on the checkboxes. You can't see the checkbox but you can click. The first one is disabled and checked, the rest is normal.
So I want Profile7 Tab to appear all the time(obviously because the checkbox is checked) and the rest to appear when I click.
There's many problems I can't seem to fix. If I click the content shows multiple contents and keeps going down. Please, help me on this I've tried for so many hours :/
$(document).ready(function() {
//Start web* hidden
$('#hasWebAdmin').hide();
$('#hasWebClient').hide();
$('#hasWebCSR').hide();
//Hide/Show Branch tabs
$('#webCSR').change(function() {
if($(this).is(":checked")) {
$('#hasWebCSR').show();
} else {
$('#hasWebCSR').hide();
}
});
$('#profile7').change(function() {
if($(this).is(":checked")) {
$('#hasProfile7').show();
} else {
$('#hasProfile7').hide();
}
});
$('#webAdmin').change(function() {
if($(this).is(":checked")) {
$('#hasWebAdmin').show();
} else {
$('#hasWebAdmin').hide();
}
});
$('#webClient').change(function() {
if($(this).is(":checked")) {
$('#hasWebClient').show();
} else {
$('#hasWebClient').hide();
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label>Deploy Apps</label>
<div class="form-group">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="profile7" name="hasWebCSR" checked disabled>
<label for="profile7">Profile 7</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webCSR" name="hasWebCSR">
<label for="webCSR">WebCSR</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webAdmin" name="hasWebAdmin">
<label for="webAdmin">WebAdmin</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webClient" name="hasWebClient">
<label for="webClient">WebClient</label>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tabProfile7" id="hasProfile7">Profile 7</a>
</li>
<li>
<a data-toggle="tab" href="#tabWebCSR" id="hasWebCSR">WebCSR</a>
</li>
<li>
<a data-toggle="tab" href="#tabWebAdmin" id="hasWebAdmin">WebAdmin</a>
</li>
<li>
<a data-toggle="tab" href="#tabWebClient" id="hasWebClient">WebClient</a>
</li>
</ul>
<div class="tab-content">
<div class="form-group">
<div id="tabProfile7" class="tab-pane fade in active ">
<div class="radio">
<label>
<input type="radio" name="profile7Branch" value="development" data-error="Please, choose one option">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="profile7Branch" value="master" data-error="Please, choose one option">
master
</label>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div id="tabWebCSR" class="tab-pane fade">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" value="development" name="webCSRBranch">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="master" name="webCSRBranch">
master
</label>
</div>
</div>
</div>
<div id="tabWebAdmin" class="tab-pane fade ">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" value="development" name="webAdminBranch">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="master" name="webAdminBranch">
master
</label>
</div>
</div>
</div>
<div id="tabWebClient" class="tab-pane fade">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" value="development" name="webClientBranch">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="master" name="webClientBranch">
master
</label>
</div>
</div>
</div>

You have some useless html tag in the first tab, check this code.
$(document).ready(function() {
//Start web* hidden
$('#hasWebAdmin').hide();
$('#hasWebClient').hide();
$('#hasWebCSR').hide();
//Hide/Show Branch tabs
$('#webCSR').change(function() {
if ($(this).is(":checked")) {
$('#hasWebCSR').show();
} else {
$('#hasWebCSR').hide();
}
});
$('#profile7').change(function() {
if ($(this).is(":checked")) {
$('#hasProfile7').show();
} else {
$('#hasProfile7').hide();
}
});
$('#webAdmin').change(function() {
if ($(this).is(":checked")) {
$('#hasWebAdmin').show();
} else {
$('#hasWebAdmin').hide();
}
});
$('#webClient').change(function() {
if ($(this).is(":checked")) {
$('#hasWebClient').show();
} else {
$('#hasWebClient').hide();
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label>Deploy Apps</label>
<div class="form-group">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="profile7" name="hasWebCSR" checked disabled>
<label for="profile7">Profile 7</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webCSR" name="hasWebCSR">
<label for="webCSR">WebCSR</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webAdmin" name="hasWebAdmin">
<label for="webAdmin">WebAdmin</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webClient" name="hasWebClient">
<label for="webClient">WebClient</label>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tabProfile7" id="hasProfile7">Profile 7</a></li>
<li><a data-toggle="tab" href="#tabWebCSR" id="hasWebCSR">WebCSR</a>
</li>
<li><a data-toggle="tab" href="#tabWebAdmin" id="hasWebAdmin">WebAdmin</a>
</li>
<li><a data-toggle="tab" href="#tabWebClient" id="hasWebClient">WebClient</a>
</li>
</ul>
<div class="tab-content">
<div id="tabProfile7" class="tab-pane fade in active ">
<span>tab1</span>
<div class="radio">
<label><input type="radio"
name="profile7Branch"
value="development"
data-error="Please, choose one option"
> development
</label>
</div>
<div class="radio">
<label><input type="radio"
name="profile7Branch"
value="master"
data-error="Please, choose one option"
> master
</label>
</div>
<div class="help-block with-errors"></div>
</div>
<div id="tabWebCSR" class="tab-pane fade">
<span>tab2</span>
<div class="form-group">
<div class="radio">
<label><input type="radio" value="development"
name="webCSRBranch"> development
</label>
</div>
<div class="radio">
<label><input type="radio" value="master"
name="webCSRBranch"> master
</label>
</div>
</div>
</div>
<div id="tabWebAdmin" class="tab-pane fade ">
<span>tab3</span>
<div class="form-group">
<div class="radio">
<label><input type="radio" value="development"
name="webAdminBranch"> development
</label>
</div>
<div class="radio">
<label><input type="radio" value="master"
name="webAdminBranch"> master
</label>
</div>
</div>
</div>
<div id="tabWebClient" class="tab-pane fade">
<span>tab4</span>
<div class="form-group">
<div class="radio">
<label><input type="radio" value="development"
name="webClientBranch"> development
</label>
</div>
<div class="radio">
<label><input type="radio" value="master"
name="webClientBranch"> master
</label>
</div>
</div>
</div>
</div>

The example needed some modifications. I took the liberty of copying and tweaking till it worked reasonably. A little bit more code is needed for the scenario where a tab other than profile7 is selected, then that tab is hidden by clicking its name at the top list. Then profile7 tab content should show. I didn't add that extra code for lack of time.
$(document).ready(function () {
//Start web* hidden
$('#hasWebAdmin').hide();
$('#hasWebClient').hide();
$('#hasWebCSR').hide();
//Hide/Show Branch tabs
$('#webCSR').change(function () {
if ($(this).is(":checked")) {
$('#hasWebCSR').show();
$('#tabWebCSR').show();
} else {
$('#hasWebCSR').hide();
$('#tabWebCSR').hide();
}
});
$('#profile7').change(function () {
if ($(this).is(":checked")) {
$('#hasProfile7').show();
$('#tabProfile7').show();
} else {
$('#hasProfile7').hide();
$('#tabProfile7').hide();
}
});
$('#webAdmin').change(function () {
if ($(this).is(":checked")) {
$('#hasWebAdmin').show();
$('#tabWebAdmin').show();
} else {
$('#hasWebAdmin').hide();
$('#tabWebAdmin').hide();
}
});
$('#webClient').change(function () {
if ($(this).is(":checked")) {
$('#hasWebClient').show();
$('#tabWebClient').show();
} else {
$('#hasWebClient').hide();
$('#tabWebClient').hide();
}
});
});
.tab-content .form-group {
position: relative;
}
.tab-pane {
position: absolute;
z-index: 1;
}
.tab-pane.active {
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label>Deploy Apps</label>
<div class="form-group">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="profile7" name="hasWebCSR" checked disabled>
<label for="profile7">Profile 7</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webCSR" name="hasWebCSR">
<label for="webCSR">WebCSR</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webAdmin" name="hasWebAdmin">
<label for="webAdmin">WebAdmin</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="webClient" name="hasWebClient">
<label for="webClient">WebClient</label>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tabProfile7" id="hasProfile7">Profile 7</a>
</li>
<li>
<a data-toggle="tab" href="#tabWebCSR" id="hasWebCSR">WebCSR</a>
</li>
<li>
<a data-toggle="tab" href="#tabWebAdmin" id="hasWebAdmin">WebAdmin</a>
</li>
<li>
<a data-toggle="tab" href="#tabWebClient" id="hasWebClient">WebClient</a>
</li>
</ul>
<div class="tab-content">
<div class="form-group">
<div id="tabProfile7" class="tab-pane fade in active ">
tabProfile7
<div class="radio">
<label>
<input type="radio" name="profile7Branch" value="development"
data-error="Please, choose one option">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="profile7Branch" value="master" data-error="Please, choose one option">
master
</label>
</div>
</div>
<div id="tabWebCSR" class="tab-pane fade">
tabWebCSR
<div class="radio">
<label>
<input type="radio" value="development" name="webCSRBranch">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="master" name="webCSRBranch">
master
</label>
</div>
</div>
<div id="tabWebAdmin" class="tab-pane fade">
tabWebAdmin
<div class="radio">
<label>
<input type="radio" value="development" name="webAdminBranch">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="master" name="webAdminBranch">
master
</label>
</div>
</div>
<div id="tabWebClient" class="tab-pane fade">
tabWebClient
<div class="radio">
<label>
<input type="radio" value="development" name="webClientBranch">
development
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="master" name="webClientBranch">
master
</label>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
</div>

How to get checkbox value through serializedarray()

how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>

To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));

Categories

Resources