Got a problem here.
I have a modal and when i open it using my code, my url extension extends like having this #mymodalid .
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').prev('label').text());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
What I need to do is that:
Show the modal as it needs on my program.
Checked some checkbox
Close the modal but on the url, #mymodalid should be remove once close.
Even if i closed the modal, what i was checked should be retain
I need to remove #mymodalid because when i redirected to the page itself upon submission, the modal will popup because of that #
Anyone, please help me.
Add a callback to your hide() functions:
$('#modal1').hide(400, removeHashFromUrl());
function removeHashFromUrl()
{
window.location.hash = '';
}
Or you could just just inline the callback, but it's obviously reusable in a function:
$('#modal1').hide(400, function(){window.location.hash = '';});
PS: 400 is the default speed for jQuery's hide().
Related
I want to be able to open / close each menu by checking / unchecking the corresponding checkboxes.
How do I show the menu when any of the checkboxes are checked? Right now the code is showing one at a time and isn't depending on the checkbox selection.
$(document).ready(function($) {
$('input[name="menus"]').change(function() {
const id = $(this).prop("id");
$(".menu").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
});
.menus div {
border: 1px solid;
height: 30px;
width: 100px
}
.menu {
opacity: 0;
visibility: hidden;
}
.menu.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.first {
background: blue
}
.second {
background: green
}
.third {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
<label>
<input type="checkbox" name="menus" id="first">First
</label>
<label>
<input type="checkbox" name="menus" id="second">Second
</label>
<label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
<div class="menu first" data-id="first"></div>
<div class="menu second " data-id="second"></div>
<div class="menu third" data-id="third"></div>
</div>
Can make an attribute selector from the id and toggle the corresponding menu item that way and leave the others unchanged
$('input[name="menus"]').change(function() {
$(".menu[data-id=" + this.id + "]").toggleClass("active", this.checked);
});
.menus div {
border: 1px solid;
height: 30px;
width: 100px
}
.menu {
opacity: 0;
visibility: hidden;
}
.menu.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.first {
background: blue
}
.second {
background: green
}
.third {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
<label>
<input type="checkbox" name="menus" id="first">First
</label>
<label>
<input type="checkbox" name="menus" id="second">Second
</label>
<label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
<div class="menu first" data-id="first"></div>
<div class="menu second " data-id="second"></div>
<div class="menu third" data-id="third"></div>
</div>
Here you go with the solution
$(document).ready(function($) {
$('input[name="menus"]').change(function() {
const id = $(this).prop("id");
const checkboxStatus = $(this).is(":checked");
$(".menu").each(function() {
if ($(this).data("id") == id) {
$(this).toggleClass("active", checkboxStatus);
}
});
});
});
.menus div {
border: 1px solid;
height: 30px;
width: 100px
}
.menu {
opacity: 0;
visibility: hidden;
}
.menu.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.first {
background: blue
}
.second {
background: green
}
.third {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
<label>
<input type="checkbox" name="menus" id="first">First
</label>
<label>
<input type="checkbox" name="menus" id="second">Second
</label>
<label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
<div class="menu first" data-id="first"></div>
<div class="menu second " data-id="second"></div>
<div class="menu third" data-id="third"></div>
</div>
I am a noob CSS programmer and I need a little help. Here are two screenshots:
and
I need to position the tree and the TinyMCE editor which exist in divs properly in the tab area. AS you can see the bottom tab border is very high instead of below the tree and the editor.
Here is my HTML code:
#{
ViewBag.Title = "Demo";
}
<link href="../../Plugins/jqueryui/css/jquery-ui.css" rel="stylesheet"/>
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/jstree/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/skin.min.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/content.min.css" rel="stylesheet" type="text/css" />
<h2>Demo</h2>
<fieldset>
<legend>Select a language: </legend>
<label for="mk-MK">MK</label>
<input type="radio" name="langid" value="mk-MK" id="mk-MK" checked>
<label for="en-US">EN</label>
<input type="radio" name="langid" value="en-US" id="en-US">
<br/>
<br/>
<div id="tabs">
<ul>
<li><a id="t1" href="#tabs-1">First</a></li>
<li><a id="t2" href="#tabs-2">Second</a></li>
<li><a id="t3" href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
<select name="domainSelect" id="domainSelect">
</select>
<br />
<br />
<select name="surveySelect" id="surveySelect">
</select>
<br />
<br />
<input type="text" id="clFreqText"/>
<br />
<br />
<select name="clPeriodSelect" id="clPeriodSelect">
</select>
<br />
<br />
<select name="clYearSelect" id="clYearSelect">
</select>
<br />
</div>
<div id="tabs-2">
<div class="treeBlock">
<div id="jstree_div"></div>
</div>
<div class="editorBlock">
<textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
<div id="tabs-3">
</div>
</div>
<p>
<input type="button" value="Next" id="nextBtn" />
<input type="button" value="Previous" id="prevBtn" />
</p>
<p id="statusMsg"></p>
<p id="errorsMsg"></p>
</fieldset>
<script src="../../Plugins/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../Plugins/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Plugins/jstree/jstree.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/theme.min.js" type="text/javascript"></script>
<!-- other scripts -->
And style.css contains:
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.treeBlock
{
border: 1px solid Grey;
padding: 10px 10px;
overflow: auto;
float: left;
height: 350px;
width: 350px;
margin: 10px 30px 10px 10px;
}
.editorBlock
{
overflow: auto;
float: right;
height: 350px;
width: 350px;
margin: 10px 30px 10px 10px;
}
Can somebody tell me why the jquery ui tabs are not of the proper size?
Note: I am coding with MVC 4/C# and Razor, so the file extension is "cshtml" fro my View
Here is what happens when I change the width to 50%, 50%.
The "Next" and "Previous" buttons should be below.
In tabs-2's css rules add the following rule:
overflow:auto
This will fix the height rendering issue due to the floated children divs.
Try a table with width:100% and the columns repsectively 40%,20%,40%.
i changed my html a bit:
<div id="tabs">
<ul>
<li><a id="t1" href="#tabs-1">Info</a></li>
<li><a id="t2" href="#tabs-2">Content</a></li>
<li><a id="t3" href="#tabs-3">Summary</a></li>
</ul>
<div id="tabs-1">
<select name="domainSelect" id="domainSelect">
</select>
<br />
<br />
<select name="surveySelect" id="surveySelect">
</select>
<br />
</div>
<div id="tabs-2">
<div class="treeBlock">
<div id="jstree_div"></div>
</div>
<div class="editorBlock">
<input type="text" value="" id="editorTitleTxt" disabled="disabled"/>
<div class="editor">
<textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
</div>
<div id="tabs-3">
<textarea rows="10" cols="10" id="summaryText" disabled="disabled">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
And my CSS:
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.treeBlock
{
overflow: auto;
height: 500px;
width: 38%;
float: left;
border: 1px solid Grey;
margin: 5px;
}
.editorBlock
{
overflow: auto;
height: 500px;
width: 60%;
margin: 5px;
}
#editorTitleTxt
{
width: 98%;
font-weight:bold;
}
It looks like this:
I have an issue with radio button and jquery. The onchange is working in Chrome but is not working in Mozilla Firefox. I put a breakpoint on the line below on Chrome and the browser is debugging normally, but when I am on Mozilla, this onchange never fires up
$(document).on("change", 'input[type="radio"]', function () {//code for doing something}
My HTML code is
<div id="tab-Pcy-2041" class="tab-pane active">
<div class="radio radio-small">
<label class="">
<div class="i-radio checked">
<input class="i-radio" data-ano="1" data-chno="0"
data-adce="0" data-chce="0" data-for="rbtncy"
xname="rbcy204" name="rbtncy2040" value="22038"
checked="checked" style="position: absolute; opacity: 0;" type="radio" />
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%;
display: block; width: 100%; height: 100%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255) none repeat scroll 0% 0%; border:
0px none; opacity: 0;">
</ins>
</div>
test
</label>
</div>
<div class="radio radio-small">
<label class="">
<div class="i-radio">
<input class="i-radio" data-ano="1" data-chno="0"
data-ace="15" data-chce="15"
data-for="rbtncy" xname="rbtncy204"
name="rbtncy2040" value="22039"
style="position: absolute; opacity: 0;" type="radio" />
<ins class="iCheck-helper" style="position:
absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%;
margin: 0px; padding: 0px; background: rgb(255, 255, 255)
none repeat scroll 0% 0%; border: 0px none; opacity: 0;">
</ins>
</div>
test33:
<span class="ItemtestClass" data-itemce="15">
<span class="CurrencySymbolClass">€</span>
<span class="Itce"> 15</span>
</span>
Cd:
<span class="ItemtestClass" data-itemce="15">
<span class="CurrencySymbolClass">€</span>
<span class="Itemce"> 15</span>
</span>
</label>
</div>
</div>
With minimal markup and script you can refer to the working snippet below
$(document).on("change","input[type=radio]", function(){
console.log($(this).prop("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rd1" id="option1" /><label for="option1">Option 1</label><br />
<input type="radio" name="rd1" id="option2" /><label for="option2">Option 2</label><br />
<input type="radio" name="rd1" id="option3" /><label for="option3">Option 3</label><br />
This a part of the entire project. The primary requirement is to load the <div> upon link click. I'm able to achieve it using the jquery script. The loads perfectly and other sibling div hided, but it scrolls to the top of the page. My page has many two sections with <div> loading in them. Is there a possibility to modify the jquery to set page scroll the loaded <div> onclick. I tried to use focus() and event.preventdefault(). But I'm not able to get it to work.
Here is the design of the page. WEBPAGE DESIGN.
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("fast");
});
});
#header {
background-color:#A4E2F4;
color:Black;
text-align:center;
padding:20px;
}
input, textarea{
background-color:#B7F9EB;
color: Black;
}
textarea {
border-radius: 6px;
border: 1px solid Black;
outline: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
}
ul2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #9B9A9A;
display: inline-block;
}
li1 {
float: left;
border-right: 1px solid #bbb;
}
li1 a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
li1 a:hover {
background-color: #111;
color: white;
}
#section {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
}
#section2 {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
background-color:#eeeeee;
}
/* Vertical nav bar */
vl {
list-style-type: none;
line-height:30px;
float: left;
height:auto;
width: 200px;
background-color: #EEEEEE;
padding: 10px;
}
li2 a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li2 a:hover {
background-color: #555;
color: white;
}
li3 a {
display: block;
color: #000;
padding: auto;
width: auto;
text-decoration: none;
}
li3 a:hover {
color: blue;
}
/* End of nav bar */
#footer {
Width:auto;
background-color:#F2F2F2;
color:Black;
clear:both;
text-align:center;
padding:4px;
}
<TABLE>
<center>
<ul>
<li1><a href="#" name="div100" >MAIN1</a></li1>
<li1><a href="#" name="div200" >MAIN2</a></li1>
</UL>
<UL2>
<div id="div100" style="display:none" align="left">
<li1><a href="#" name="div1" >SUBMAIN1</a></li1>
<li1><a href="#" name="div3" >SUBMAIN2</a></li1>
<li1><a href="#" name="div5" >SUBMAIN3</a></li1>
</div>
<div id="div200" style="display:none" align="left">
<li1><a href="#" name="div9" >SUBMAIN4</a></li1>
<li1><a href="#" name="div10" >SUBMAIN5</a></li1>
<li1><a href="#" name="div11" >SUBMAIN6</a></li1>
</UL2>
</center>
<center>
<!-- Second Link Container -->
<div id="div1" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="l1" >1. link1</a></li3>
<li3><a href="#" name="l2" >2. link2</a></li3>
<li3><a href="#" name="l3" >3. Link3</a></li3>
<li3><a href="#" name="l4" >4. link4</a></li3>
</div>
</div>
<div id="div2" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="m1" >1. link1</a></li3>
<li3><a href="#" name="m2" >2. link2</a></li3>
<li3><a href="#" name="m3" >3. Link3</a></li3>
<li3><a href="#" name="m4" >4. link4</a></li3>
</div>
</div>
</center>
<!-- Bootstrap Modal Div -->
<!-- modals goes here-->
<!-- Main Container -->
<center>
<div id="section">
<div id = "l1" style="display:none" align="left">
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<div id = "l2" style="display:none" align="left">
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<!--- Code goes on -->
Add $(this).scrollTop($("#" + divName);
to your function.
var elem = $("#"+divname);
$('html, body').animate({
scrollTop: elem.offset().top;
}, 800);
I have a CLEAR button. The aim of that CLEAR button is that when a user clicks the button, all selected checkbox values are removed. Thats it. Now somehow I managed to get a checkbox with the CLEAR button (seemed for me the only way), and also upon clicking then all checkbox values are selected and when clicking again all checkbox values are removed. Is it possible to get only the button and then just one click for just removal of selected checkboxes? My current code only works for the first filter-menu BRAND, but for the others it does not work, I cant figure out why.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
/* CSS used here will be applied after bootstrap.css */
/* FILTER_datafeed */
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
/* Filter-menu APPLY and CLEAR */
.select_filter > .multi_select_container > .div_form > .btn_apply {
border-right: 1px solid #e6e6e6;
box-sizing: border-box;
display: inline-block;
float: left;
padding: 10px 16px 10px 17px;
text-align: center;
width: 50%;
}
.select_filter > .multi_select_container > .div_form > .btn_clear.disabled, .select_filter > .multi_select_container > .div_form > .btn_clear[disabled], .select_filter > .multi_select_container > .div_form > .btn_clear[disabled]:hover {
background-color: transparent;
color: #ccc;
}
.select_filter > .multi_select_container > .div_form > .btn_clear {
box-sizing: border-box;
display: inline-block;
float: right;
padding: 10px 17px;
text-align: center;
width: 50%;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
width:100%;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
/* Type-ahead plugin */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
/* Type-ahead plugin END */
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
Man you are using the same ID four times. The ID selector always return a single element, in your case you are only attaching the event to the first input with the id #clear so it will be working ONLY on the first clear button. Use a class instead and somehow scope the changes to affect only the related checkboxes.
Change the IDs to classes and use the following:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});
Working example
To make sure the clear button always clear the selection, you should always set the property checked to false like this:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});
Updated example
It's only working for the first menu because an id is suppose to be unique. You are actually only applying an event listener to the first #clear element. In addition, you are toggling the checked property of all the checkboxes, not just the checkboxes in that dropdown menu.
Change the id attribute to a class, in this case, .clear, and when the change event is fired, select the closest .dropdown-menu element and toggle all the descendant checkbox elements:
Updated Example
$(".clear").on('change', function () {
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});
You could also just remove the checkbox and attach a click event to the .btn_clear element. You will also need to stop the event propagation in order to prevent the dropdown element from closing:
Updated Example
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});