Toggle checkbox - click on parent DIV element

Toggle checkbox - click on parent DIV element - javascript

I have few div elements and inside every div one checkbox.
On click this div I want to check/uncheck checkbox and add class like active or checked. Have some code if you have any idea.
<div class="filter">
<div id="select_10">
<input type="checkbox" name="what" />
visible1
</div>
<div id="select_91">
<input type="checkbox" name="ever" />
visible2
</div>
<div id="select_101">
<input type="checkbox" name="whatever" />
visible3
</div>
</div>
using this code:
$(document).on("click", "div.filter div", function (event) {
var target = $(event.target);
var id = $(this)attr('id');
if (target.is('div#'+id+' input:checkbox')) {
return;
}
var checkbox = $(this).find("input[type='checkbox']");
checkbox.prop("checked", !checkbox.is(':checked'));
});

$(this)attr('id'); should have a . like in
$(this).attr('id');
That's it.
Why using DIV and JS when we have <label> for that purpose!
.filter label {
cursor: pointer;
display: block;
background: #eee;
margin:5px; padding: 10px;
}
<div class="filter">
<label id="select_10">
<input type="checkbox" name="what" />
visible1
</label>
<label id="select_91">
<input type="checkbox" name="ever" />
visible2
</label >
<label id="select_101">
<input type="checkbox" name="whatever" />
visible3
</label >
</div>
all you need. Style label as you would for your DIV by just adding eventually display: block;
Or you can even move the inputs before the label and style the complete LABEL elements in pure CSS:
.filter input{
position: absolute;
visibility: hidden;
}
.filter label {
cursor: pointer;
display: block;
margin:5px; padding: 10px;
background: #eee;
}
.filter input:checked + label{
background: #cf5;
}
.filter label:before{content: "\2610";}
.filter input:checked + label:before{content: "\2611";}
<div class="filter">
<input id="ckb_10" type="checkbox" name="what" />
<label for="ckb_10">
what
</label>
<input id="ckb_91" type="checkbox" name="foo" />
<label for="ckb_91">
foo
</label>
</div>

Related

How to add a select all option to a jquery filter

I have managed to start working with this filter and the only thing left to do is understand how to allow the 'Select All' function to work properly. It keeps breaking on me.
// Javascript
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.hidden {
visible: hidden;
position: absolute;
left: 20px;
top: 5px;
z-index: -1;
}
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="all">Select All
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="red">Red
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="green">Green
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="blue">Blue
</label>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</div>
</div>
</div>

By using addClass() , removeClass() and toggleClass() it will be much easier to achieve this
You can use .val() instead of .attr('value')
Use if statement to check the selectAll checkbox value
Add .box.show class to your css style sheet
With checkbox use .change instead of .click
// Javascript
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
var inputValue = $(this).val(); // input value
if(inputValue == 'all' && $(this).is(":checked")){ // check the selectAll value and this is checked
$(".box").addClass('show'); // Add class show to all the box
}else if(inputValue == 'all' && !$(this).is(":checked")){
$(".box").removeClass('show');
}else{
$("." + inputValue).toggleClass('show'); // toggle class show
}
});
});
.hidden {
visibility: hidden;
position: absolute;
left: 20px;
top: 5px;
z-index: -1;
}
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.box.show{
display : block;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="all">Select All
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="red">Red
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="green">Green
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden" value="blue">Blue
</label>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</div>
</div>
</div>
This code is just for start .. Still a lot of work needed depending on what you're trying to do
Additional:
Nothing called visible: in css it should be visibility:
To get the count of checked checkbox $('input[type="checkbox"]:checked').length
Let's go farther away and make it more complicated
Let's say you want to add some action to the filter checkboxes also the selectAll checkbox to change classes or change the selectAll button style or check if all buttons checked or not if its checked then change selectAll button class and so on
The main idea in the next code is : The selectAll button will change the checkboxes to checked or unchecked and this change will effect the show/hide boxes by itself so no need here to make the selectAll button to control show/hide boxes . It will control the checkboxes not the boxes
// Javascript
$(document).ready(function(){
$('.filter input[type="checkbox"]').change(function(){
var input = $(this); // this input
var inputValue = input.val(); // this input value
var inputLabel = input.closest('label'); // get the closest label
if(input.hasClass('all-boxes')){ // if its selectAll button
ToggleCheckboxes(input);
}else{
input.toggleClass('Checked notChecked');
inputLabel.toggleClass('btn-success');
ToggleBoxes(inputValue);
// get checked checkboxes
var countAllCheckboxes = $('.filter-boxes').length;
var countChecked = $('.filter-boxes.Checked').length;
if(countAllCheckboxes == countChecked){
$(".all-boxes").prop('checked' , true).closest('label').addClass('btn-success');
}else{
$(".all-boxes").prop('checked' , false).closest('label').removeClass('btn-success');
}
}
});
});
// show/hide boxes
function ToggleBoxes(Selector){
$("." + Selector).toggleClass('show');
}
// toggle the checkboxes to checked/unchecked
function ToggleCheckboxes(Selector){
var GetChecked = Selector.is(':checked')? 'notChecked':'Checked';
console.log(GetChecked);
$('.filter-boxes.'+ GetChecked).change();
}
.hidden {
visibility: hidden;
position: absolute;
left: 20px;
top: 5px;
z-index: -1;
}
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.box.show{
display : block;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12 filter">
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden all-boxes" value="all">Select All
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden filter-boxes notChecked" value="red">Red
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden filter-boxes notChecked" value="green">Green
</label>
<label class="btn btn-md btn-primary">
<input type="checkbox" name="colorCheckbox" class="hidden filter-boxes notChecked" value="blue">Blue
</label>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</div>
</div>
</div>
To change white spaces heights between items .. in css style
.item-selected {
color: #fff;
padding: 20px;
display: none;
margin-top: 5px; /* <<<<<< here */
background: #cccccc;
}
And the reason of different height of white spaces between items this is because all .col- classes has a min-height : 1px; .. To avoid this copy/paste the next code to your css stylesheet
#selfPacedList .col-sm-12{
min-height : 0px;
}

how to show hide single area in multiple div

we have one problem in code, in my code function there is main div area and inside this we have two radio button when we change or select radio there is two section one is for textarea and one for file up load button, when we click they show and hide.
please find the link of my code:- https://jsfiddle.net/bharat_negi/bw6uw9ah/
jquery code :-
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$('.textArea').show();
$('.browseArea').hide();
}
else if (this.value == 'Text') {
$('.textArea').hide();
$('.browseArea').show();
}
});
}

Try this.You need target the element of textarea from the closest parent otherwise its target all the texarea element.That why its hiding all the textarea and choose buttons.And also change the matching if with Text else with Image
changeCheck();
function changeCheck() {
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
} else if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
.questionBlock {
float: left;
margin: 0;
padding: 10px 0;
width: 100%;
display: flex;
}
.questionBlock .alloption {
float: left;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
.questionBlock .text {
display: inline-block;
margin: 0;
padding: 0;
width: 10%;
}
.questionBlock .radioArea {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
}
.questionBlock .textArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
}
.questionBlock .browseArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>

You can find working jsfiddle here without so much changes to your code
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio]', function() {
if (this.value == 'Image') {
console.log($(this).parent())
$(this).parents('.questionBlock').find('.textArea').hide();
$(this).parents('.questionBlock').find('.browseArea').show();
}
else if (this.value == 'Text') {
$(this).parents('.questionBlock').find('.textArea').show();
$(this).parents('.questionBlock').find('.browseArea').hide();
}
});
}
Multiple checkbox toggle with image and textarea

Here is updated jquery function:
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
}
else if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
I have used $(this).closest('.questionBlock') to get the relevant textarea and fileupload elements.

Here $(this).parent().closest('div') will get the 'radioArea' div then you call the .next() it will retrieve next div after the 'radioArea' which is 'textArea' div so in this way you can perform show or hide functionality corresponding to the item that you clicked.
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
}
else if (this.value == 'Text') {
$(this).parent().closest('div').next().next().hide(); //hide browseArea div
$(this).parent().closest('div').next().show(); //show textArea div
}
});
}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>

Strange alphabetical sorting of checkbox lists [duplicate]

This question already has answers here:
Sorting an array of objects by property values
(35 answers)
Closed 6 years ago.
I have 4 checkboxes, each representing a region. Clicking any one of them shows 3 countries relevant to that region. Clicking combinations of the regional checkboxes shows all the relevant countries in-line, but I want
the list of country checkboxes to always be displayed in alphabetical order.
Strangely my jquery seemed to work for 3 regional checkboxes, but doesn't seem to work for 4. I just can't see what dumb mistake I'm making and am starting to suspect something more sinister. Here's my fiddle: https://jsfiddle.net/m5v7v6kv/
Thanks for any help.
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="EuropeCountries" />Europe</label>
<label><input type="checkbox" id="NAMCountries" />North America</label>
<label><input type="checkbox" id="SAMCountries" />South America</label>
<label><input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries"><input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries"><input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries"><input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries"><input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries"><input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries"><input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>

Looks like your compare function should return 1 or -1. There is really no reason to return 0 in your case unless somehow two countries will have the same name.
return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="EuropeCountries" />Europe</label>
<label>
<input type="checkbox" id="NAMCountries" />North America</label>
<label>
<input type="checkbox" id="SAMCountries" />South America</label>
<label>
<input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<!-------------------------------------------------------------------->
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries">
<input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries">
<input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries">
<input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries">
<input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries">
<input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries">
<input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>

How to align html form inputs and contents spacing

How can i align spacing between form inputs, labels, text area and the received data from php. Which may have multiple lines of data to display. How can i achieve the auto arrangement of next elements if something is added in the middle.?
Here is the code: (How can to make auto arrangement? is there a better way achieving it than the below code? )
li{text-decoration:none; list-style-type:none; }
.left{ position:relative; left:100px;}
.right{ position:relative; left:200px;}
textarea{ position:relative; width:200px; height:70px; }
<html>
<body>
<br><br>
<form>
<ul>
<label class="left">Status:</label><li class="right"><textarea name="status"></textarea></li><br><br>
<label class="left">First name:</label><li class="right"><input type="text" name="firstname"></li><br><br>
<label class="left">Last name:</label><li class="right"><input type="text" name="lastname"></li><br><br>
<label class="left">Address:</label><li class="right"><textarea name="address"></textarea></li><br><br>
<label class="left">Address 2:</label><li class="right"><textarea name="address2"></textarea></li>
</ul>
</form>
</body>
</html>

You could solve just using CSS flexbox.
display: flex for each li, some flex-basis for each label (in this case 25% and add a class for each input (such as textarea, etc) with flex: 1.
document.querySelector('#add').addEventListener('click', function() {
var elem = document.createElement('li');
elem.innerHTML = '<label>Lorem Ipsum</label><input type="text" class="field" />';
document.querySelector('#list').appendChild(elem);
})
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
margin-bottom: .5em;
}
label {
flex: 0 0 25%;
text-align: right;
padding-right: 1em;
align-self: center;
}
.field {
flex: 1;
}
<ul id=list>
<li>
<label for=status>Status:</label>
<textarea class="field" id=status name="status"></textarea>
</li>
<li>
<label for=firstname>First name:</label>
<input class="field" id=firstname type="text" name="firstname">
</li>
<li>
<label for=lastname>Last name:</label>
<input class="field" id=lastname type="text" name="lastname">
</li>
<li>
<label for=address>Address:</label>
<textarea class="field" id="address" name="address"></textarea>
</li>
<li>
<label for=address2>Address 2:</label>
<textarea class="field" id="address2" name="address2"></textarea>
</li>
</ul>
<button id=add>Add</button>
Also added a for="..." attribute to have the right behaviour when click on a label (will focus on the related input).

Change btn color when clicking menu checkbox option

I am trying to have a button change color when a user clicks one of the options from a menu listing. Is this possible?
For btn_clear, I would like the background-color to change automatically immediately to BLUE upon click of one of the menu options, and for btn_apply the same but color change to RED.
So for example, for category "Products" a user clicks "Alpha" and then the button color changes take effect automatically immediately.
Please see my FIDDLE... FIDDLE
(SA snippet doesnt seem to want to work... sorry).
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$("checkbox").on("click", function(e) {
e.preventDefault();
var i = $("li").index( $(this).parent() );
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('btn_apply').css('background', 'red');
}
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" 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">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>

Yes, it is possible http://www.bootply.com/rb3Uyw68Zg
but you have a few issues with your code, I added some "console.log" the see what was going on there
first you were missing a "." in your selectors, to change
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('btn_apply').css('background', 'red');
}
into
if ( i === 1 ) {
$('.btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('.btn_apply').css('background', 'red');
}
also
var i = $("li").index( $(this).parent() );
is always resulting -1, so you never get into those ifs, you'll have to fix this line for your background color changes to get called.
this is the code after my changes http://www.bootply.com/rb3Uyw68Zg
EDIT
to restrict the handling of clicks per menu, you can use the descendant selector, so you should change:
$(".checkbox").on("click", function(e) {
into
$(".products .checkbox").on("click", function(e) {
that means, you will only handle clicks to checkboxes that are children of ".products" (you also have to add products class to your dropdown)
here's an updated example: http://www.bootply.com/QoIe6kIt2e

This will change the colors of both of the buttons when one option is selected:
$(".checkbox").on("click", function(e) {
$('.btn_clear').css('background-color', 'blue');
$('.btn_apply').css('background-color', 'red');
});
Snippet:http://www.bootply.com/0CQWCAtU2s

We Keep Coding

JavaScript is the programming language of the Web.

Toggle checkbox - click on parent DIV element - javascript

Related

How to add a select all option to a jquery filter

how to show hide single area in multiple div

Strange alphabetical sorting of checkbox lists [duplicate]

How to align html form inputs and contents spacing

Change btn color when clicking menu checkbox option

Categories

Resources