Develop Reference

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/>

jQuery: show Div when check first radio button

In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

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>

Access the nested path of the input elements

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>

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));