Perform certain action when radio button is checked

Perform certain action when radio button is checked - javascript

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>

Related

Finish every non-empty last "items" of every "blocks" with a point instead of a comma

I've a code where the user generate some text by checking some radios. I would like to finish every "blocks" of "items" by a point instead of a comma.
So I've made this snippet for an exemple of my code :
document.addEventListener("change", comma);
function points(item){
item.innerHTML = item.innerHTML.replace(",", ".");
}
function commas(item){
item.innerHTML = item.innerHTML.replace(".", ",");
}
function comma(){
document.querySelectorAll('.blocks .items').forEach(commas);
document.querySelectorAll('.blocks .items:not(:empty):last-child').forEach(points);
}
function person(x){
let name = document.getElementById("name"+x+"").value;
let hobby = document.querySelector("input[name=hobby"+x+"]:checked").value;
let color = document.querySelector("input[name=color"+x+"]:checked").value;
if(name !== ""){
document.getElementById("nameOf"+x+"").innerHTML = name + ", ";
document.getElementById("hobbyOf"+x+"").innerHTML = hobby;
document.getElementById("colorOf"+x+"").innerHTML = color;
} else{
document.getElementById("nameOf"+x+"").innerHTML = name;
document.getElementById("hobbyOf"+x+"").innerHTML = hobby;
document.getElementById("colorOf"+x+"").innerHTML = color;
}
}
.containerEdit{
border : solid black 1px;
border-radius : 4px;
padding: 10px;
margin: 10px 0;
}
<div calss="block"><b>First person</b>
<div class="item">Name :
<input id="nameP1" onchange="person('P1')"/>
</div>
<div class="item">Hobby :
<input type="radio" name="hobbyP1" id="basketballP1" onchange="person('P1')" value="basketball, ">
<label for="basketballP1">basketball</label>
<input type="radio" name="hobbyP1" id="footballP1" onchange="person('P1')" value="football, ">
<label for="footballP1">football</label>
<input type="radio" name="hobbyP1" id="handballP1" onchange="person('P1')" value="basketball, ">
<label for="handballP1">handball</label>
<input type="radio" name="hobbyP1" id="noHobbyP1" onchange="person('P1')" value="" checked="checked">
<label for="noneP1">none</label>
</div>
<div class="item">Favorit color
<input type="radio" name="colorP1" id="blueP1" onchange="person('P1')" value="blue, ">
<label for="blueP1">blue</label>
<input type="radio" name="colorP1" id="greenP1" onchange="person('P1')" value="green, ">
<label for="greenP1">green</label>
<input type="radio" name="colorP1" id="redP1" onchange="person('P1')" value="red, ">
<label for="redP1">red</label>
<input type="radio" name="colorP1" id="noColorP1" onchange="person('P1')" value="" checked="checked">
<label for="noneP1">none</label>
</div>
<br/>
</div>
<div calss="block"><b>Second person</b>
<div class="item">Name :
<input id="nameP2" onchange="person('P2')"/>
</div>
<div class="item">Hobby :
<input type="radio" name="hobbyP2" id="basketballP2" onchange="person('P2')" value="basketball, ">
<label for="basketballP2">basketball</label>
<input type="radio" name="hobbyP2" id="footballP2" onchange="person('P2')" value="football, ">
<label for="footballP2">football</label>
<input type="radio" name="hobbyP2" id="handballP2" onchange="person('P2')" value="basketball, ">
<label for="handballP2">handball</label>
<input type="radio" name="hobbyP2" id="noHobbyP2" onchange="person('P2')" value="" checked="checked">
<label for="noneP2">none</label>
</div>
<div class="item">Favorit color
<input type="radio" name="colorP2" id="blueP2" onchange="person('P2')" value="blue, ">
<label for="blueP2">blue</label>
<input type="radio" name="colorP2" id="greenP2" onchange="person('P2')" value="green, ">
<label for="greenP2">green</label>
<input type="radio" name="colorP2" id="redP2" onchange="person('P2')" value="red, ">
<label for="redP2">red</label>
<input type="radio" name="colorP2" id="noColorP2" onchange="person('P2')" value="" checked="checked">
<label for="noneP2">none</label>
</div>
<br/>
</div>
<div calss="block"><b>Third person</b>
<div class="item">Name :
<input id="nameP3" onchange="person('P3')"/>
</div>
<div class="item">Hobby :
<input type="radio" name="hobbyP3" id="basketballP3" onchange="person('P3')" value="basketball, ">
<label for="basketballP3">basketball</label>
<input type="radio" name="hobbyP3" id="footballP3" onchange="person('P3')" value="football, ">
<label for="footballP3">football</label>
<input type="radio" name="hobbyP3" id="handballP3" onchange="person('P3')" value="basketball, ">
<label for="handballP3">handball</label>
<input type="radio" name="hobbyP3" id="noHobbyP3" onchange="person('P3')" value="" checked="checked">
<label for="noneP3">none</label>
</div>
<div class="item">Favorit color
<input type="radio" name="colorP3" id="blueP3" onchange="person('P3')" value="blue, ">
<label for="blueP3">blue</label>
<input type="radio" name="colorP3" id="greenP3" onchange="person('P3')" value="green, ">
<label for="greenP3">green</label>
<input type="radio" name="colorP3" id="redP3" onchange="person('P3')" value="red, ">
<label for="redP3">red</label>
<input type="radio" name="colorP3" id="noColorP3" onchange="person('P3')" value="" checked="checked">
<label for="noneP3">none</label>
</div>
<br/>
</div>
<div class="containerEdit" contenteditable="true">
<b>Descitpion of the persons (you can edit this text) :</b>
<div class="blocks" id="block1">
<span class="items" id="nameOfP1"></span>
<span class="items" id="hobbyOfP1"></span>
<span class="items" id="colorOfP1"></span>
</div>
<div class="blocks" id="block2">
<span class="items" id="nameOfP2"></span>
<span class="items" id="hobbyOfP2"></span>
<span class="items" id="colorOfP2"></span>
</div>
<div class="blocks" id="block3">
<span class="items" id="nameOfP3"></span>
<span class="items" id="hobbyOfP3"></span>
<span class="items" id="colorOfP3"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The problem is that my function changes the last "item" of each "block" even if the last child is empty :/
I'd like to change every last NONE EMPTY "item" of each "block" :) Any ideas of how I could achieve it ?
Thanks for the time you take to help me :)

Personally I would add none in the empty places. Is this what you want?
function person(x) {
let items = [];
let name = document.getElementById("name" + x).value;
items.push(name);
items.push(document.querySelector("input[name=hobby" + x + "]:checked").value);
items.push(document.querySelector("input[name=color" + x + "]:checked").value);
if (name !== "") {
const results = items.filter((element) => {
return element !== "";
});
document.getElementById("block" + x.slice(1, 2)).innerHTML = results.join(", ") + ".";
}
}
.containerEdit{
border : solid black 1px;
border-radius : 4px;
padding: 10px;
margin: 10px 0;
}
<div calss="block">
<b>First person</b>
<div class="item">
Name :
<input id="nameP1" class="pers" onchange="person('P1')" />
</div>
<div class="item">
Hobby :
<input type="radio" name="hobbyP1" id="basketballP1" onchange="person('P1')" value="basketball" />
<label for="basketballP1">basketball</label>
<input type="radio" name="hobbyP1" id="footballP1" onchange="person('P1')" value="football" />
<label for="footballP1">football</label>
<input type="radio" name="hobbyP1" id="handballP1" onchange="person('P1')" value="basketball" />
<label for="handballP1">handball</label>
<input type="radio" name="hobbyP1" id="noHobbyP1" onchange="person('P1')" value="" checked="checked" />
<label for="noneP1">none</label>
</div>
<div class="item">
Favorit color
<input type="radio" name="colorP1" id="blueP1" onchange="person('P1')" value="blue" />
<label for="blueP1">blue</label>
<input type="radio" name="colorP1" id="greenP1" onchange="person('P1')" value="green" />
<label for="greenP1">green</label>
<input type="radio" name="colorP1" id="redP1" onchange="person('P1')" value="red" />
<label for="redP1">red</label>
<input type="radio" name="colorP1" id="noColorP1" onchange="person('P1')" value="" checked="checked" />
<label for="noneP1">none</label>
</div>
<br />
</div>
<div calss="block">
<b>Second person</b>
<div class="item">
Name :
<input id="nameP2" class="pers" onchange="person('P2')" />
</div>
<div class="item">
Hobby :
<input type="radio" name="hobbyP2" id="basketballP2" onchange="person('P2')" value="basketball" />
<label for="basketballP2">basketball</label>
<input type="radio" name="hobbyP2" id="footballP2" onchange="person('P2')" value="football" />
<label for="footballP2">football</label>
<input type="radio" name="hobbyP2" id="handballP2" onchange="person('P2')" value="basketball" />
<label for="handballP2">handball</label>
<input type="radio" name="hobbyP2" id="noHobbyP2" onchange="person('P2')" value="" checked="checked" />
<label for="noneP2">none</label>
</div>
<div class="item">
Favorit color
<input type="radio" name="colorP2" id="blueP2" onchange="person('P2')" value="blue" />
<label for="blueP2">blue</label>
<input type="radio" name="colorP2" id="greenP2" onchange="person('P2')" value="green" />
<label for="greenP2">green</label>
<input type="radio" name="colorP2" id="redP2" onchange="person('P2')" value="red" />
<label for="redP2">red</label>
<input type="radio" name="colorP2" id="noColorP2" onchange="person('P2')" value="" checked="checked" />
<label for="noneP2">none</label>
</div>
<br />
</div>
<div calss="block">
<b>Third person</b>
<div class="item">
Name :
<input id="nameP3" class="pers" onchange="person('P3')" />
</div>
<div class="item">
Hobby :
<input type="radio" name="hobbyP3" id="basketballP3" onchange="person('P3')" value="basketball" />
<label for="basketballP3">basketball</label>
<input type="radio" name="hobbyP3" id="footballP3" onchange="person('P3')" value="football" />
<label for="footballP3">football</label>
<input type="radio" name="hobbyP3" id="handballP3" onchange="person('P3')" value="basketball" />
<label for="handballP3">handball</label>
<input type="radio" name="hobbyP3" id="noHobbyP3" onchange="person('P3')" value="" checked="checked" />
<label for="noneP3">none</label>
</div>
<div class="item">
Favorit color
<input type="radio" name="colorP3" id="blueP3" onchange="person('P3')" value="blue" />
<label for="blueP3">blue</label>
<input type="radio" name="colorP3" id="greenP3" onchange="person('P3')" value="green" />
<label for="greenP3">green</label>
<input type="radio" name="colorP3" id="redP3" onchange="person('P3')" value="red" />
<label for="redP3">red</label>
<input type="radio" name="colorP3" id="noColorP3" onchange="person('P3')" value="" checked="checked" />
<label for="noneP3">none</label>
</div>
<br />
</div>
<div class="containerEdit" contenteditable="true">
<b>Descitpion of the persons (you can edit this text) :</b>
<div class="blocks" id="block1">
</div>
<div class="blocks" id="block2">
</div>
<div class="blocks" id="block3">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

dynamic form using javascript

I am trying to create a form similar to the image attached below, how "add the question" can be done using javascript? and I am trying to use express(nodejs framework).
Now if user clicks add question option then a similar form could be attached multiple times.
<h1>Create</h1>
<div class="main">
<form action="/handle" method="post">
<div class="option">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topicname" required>
</div>
<div class="option">
<label for="question">Enter your question:</label>
<input type="text" id="question" name="questioninput" required>
</div>
<div class="option">
<label for="option1">option 1:</label>
<input type="text" id="option1" name="option1input" required>
</div>
<div class="option">
<label for="option2">option 2:</label>
<input type="text" id="option2" name="option2input" required>
</div>
<div class="option">
<label for="option3">option 3:</label>
<input type="text" id="option3" name="option3input" required>
</div>
<div class="option">
<label for="option4">option 4:</label>
<input type="text" id="option4" name="option4input" required>
</div>
<div>
<button type="submit">Send your response</button>
</div>
</div>
</form>
image representation:

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 center this element

<div id="1" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
At the moment, it appears to the left of the screen. Please have a look. Thank you.

Try adding some CSS code
#mydiv{
text-align:center
}
<div id="mydiv">
<div class="radio">
<label><input type="radio" name="o1"><input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>

First of all, if you want to center the div with id='1', it needs a parent element
HTML
<div id='parent'>
<div id="myDiv" style="display:block">
<div class="radio">
<label>
<input type="radio" name="o1">
<input type="text" class="form-control" id="opt1">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o2">
<input type="text" class="form-control" id="opt2">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3">
<input type="text" class="form-control" id="opt3">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o4">
<input type="text" class="form-control" id="opt4">
</label>
</div>
</div>
</div>
CSS
#parent {
display: flex;
justify-content: center;
}
jsfiddle https://jsfiddle.net/g8oLjnus/
learn more about flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

if you use one of the following you can use it to centre it 50% will put the start of text or input box. px means you have to aline manually. insert this into or the css file under #mydiv. to do this change your id to mydiv or something else.
left:50px;
left:50%

I've changed the id to myid; and added a parent div
<div class="parent">
<div id="myid" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form- control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
</div>
The .parent class must be:
.parent{position: relative;}
And the #myid must be
#myid{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hope is works :)

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

Develop Reference

JavaScript is the programming language of the Web.

Perform certain action when radio button is checked - javascript

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

Related

Finish every non-empty last "items" of every "blocks" with a point instead of a comma

dynamic form using javascript

Access the nested path of the input elements

How to center this element

How to get checkbox value through serializedarray()

Categories

Resources