We Keep Coding

Input radio options to be displayed on click

I am creating a set of radio buttons that will later be used to capture the values in order to create a subscription/ modal checkout. Currently I have the radio options displaying. Im trying to get it to when a user clicks on the arrow image the radio buttons drop down and appear. I have written some code seeming that it will work. Any tips are greatly appreciated.
<main class="subscription__container">
<section id="preferences" class="subscription__container--preferences">
<div class="question__container">
<h3 class="question__container--title">
How do you drink your coffee?
</h3>
<img
class="question__container--img"
src="../assets/plan/desktop/icon-arrow.svg"
alt="arrow"
/>
</div>
<div class="options__container">
<div class="options__container--option">
<input
id="capsule"
type="radio"
data-preference="Capsule"
value="Capsule"
name="preferences"
checked
/>
<label for="capsule"></label>
<h4 class="options__container--title">Capsule</h4>
<p class="options__container--description">
Compatible with Nespresso systems and similar brewers.
</p>
</div>
<div class="options__container--option">
<input
id="filter"
type="radio"
data-preference="Filter"
value="Filter"
name="preferences"
/>
<label for="filter"></label>
<h4 class="options__container--title">Filter</h4>
<p class="options__container--description">
For pour over or drip methods like Aeropress, Chemex, and V60.
</p>
</div>
<div class="options__container--option">
<input
id="espresso"
type="radio"
data-preference="Espresso"
value="Espresso"
name="preferences"
/>
<label for="espresso"></label>
<h4 class="options__container--title">Espresso</h4>
<p class="options__container--description">
Dense and finely ground beans for an intense, flavorful
experience.
</p>
</div>
</div>
</section>
<section id="bean" class="subscription__container--beans">
<div class="question__container">
<h3 class="question__container--title">What type of coffee?</h3>
<img
class="question__container--img"
src="../assets/plan/desktop/icon-arrow.svg"
alt="arrow"
/>
</div>
<div class="options__container">
<div class="options__container--option">
<input
id="single"
type="radio"
data-bean="Single"
value="Single"
name="beanType"
checked
/>
<label for="single"></label>
<h4 class="options__container--title">Single Origin</h4>
<p class="options__container--description">
Distinct, high quality coffee from a specific family-owned farm.
</p>
</div>
<div class="options__container--option">
<input
id="decaf"
type="radio"
data-bean="Decaf"
value="Decaf"
name="beanType"
/>
<label for="filter"></label>
<h4 class="options__container--title">Decaf</h4>
<p class="options__container--description">
Just like regular coffee, except the caffeine has been removed.
</p>
</div>
<div class="options__container--option">
<input
id="blended"
type="radio"
data-preference="Blended"
value="Blended"
name="beanType"
/>
<label for="blended"></label>
<h4 class="options__container--title">Blended</h4>
<p class="options__container--description">
Combination of two or three dark roasted beans of organic coffees.
</p>
</div>
</div>
</section>
</main>
.options__container--option {
display: none;
}
.options__container--option.active {
display: block;
}
arrowButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = event.target.parentElement.querySelector(
".options__container--option"
);
subMenu.classList.toggle("active");
})
);

you can do that...
#my-form h4 {
margin : 0;
}
#my-form p {
margin : 0;
font-size : .8em;
margin-bottom : .3em;
}
#my-form summary {
font-size : 1.4em;
font-weight : bold;
margin : .4em;
}
#my-form input[type="radio"] {
display : none;
}
#my-form h4:after {
content : '\00A0';
display : inline-block;
border : 1px solid lightblue;
font-size : 1em;
width : .6em;
height : .6em;
overflow : visible;
margin : .3em .3em 0 .5em;
line-height : .6em;
border-radius : 2px;
}
#my-form input[type="radio"]:checked + h4:after {
content : '✓';
color : green;
}
<form id="my-form">
<details>
<summary> How do you drink your coffee?</summary>
<label>
<input name="preferences" type="radio" value="Capsule" >
<h4>Capsule</h4>
<p>Compatible with Nespresso systems and similar brewers. </p>
</label>
<label>
<input name="preferences" type="radio" value="Filter" >
<h4>Filter</h4>
<p>For pour over or drip methods like Aeropress, Chemex, and V60. </p>
</label>
<label>
<input name="preferences" type="radio" value="Espresso" >
<h4>Espresso</h4>
<p>Dense and finely ground beans for an intense, flavorful experience. </p>
</label>
</details>
<details>
<summary>What type of coffee?</summary>
<label>
<input name="beanType" type="radio" value="Single Origin" >
<h4>Single Origin</h4>
<p>Distinct, high quality coffee from a specific family-owned farm</p>
</label>
<label>
<input name="beanType" type="radio" value="Decaf" >
<h4>Decaf</h4>
<p>Just like regular coffee, except the caffeine has been removed.</p>
</label>
<label>
<input name="beanType" type="radio" value="Blended">
<h4>Blended</h4>
<p>Combination of two or three dark roasted beans of organic coffees.</p>
</label>
</details>
</form>

highlight image when clicked on then check a radio button

You know those sites that have an image as a checkbox and which ever image is checked gets highlighted? I'm trying to do the same, but instead with a radio button and I can't seem to get it to work. Here's my code:
html
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>
css
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
JavaScript
jQuery(function ($) {
// init the state from the input
$(".image-radio").each(function () {
if ($(this).find('input[type="radio"]').first().attr("checked")) {
$(this).addClass('image-radio-checked');
}
else {
$(this).removeClass('image-radio-checked');
}
});
// sync the state to the input
$(".image-radio").on("click", function (e) {
if ($(this).hasClass('image-radio-checked')) {
$(this).removeClass('image-radio-checked');
$(this).find('input[type="radio"]').first().removeAttr("checked");
}
else {
$(this).addClass('image-radio-checked');
$(this).find('input[type="radio"]').first().attr("checked", "checked");
}
e.preventDefault();
});
});
jsfiddle: https://jsfiddle.net/dwc6gf4q/5/

Do you have to use the radio buttons? If not, just keep the state in the script like you already do. When you click an image change the state to active and check the other images for being active. If one is, set it to inactive.
Then, if you need the radio buttons, you can change their state with the same function.
EDIT: Fiddled a little: https://jsfiddle.net/dwc6gf4q/41/
As far as i understood, works like you wanted.
jQuery(function ($) {
// init the state from the input
// sync the state to the input
$(".image-radio").on("click", function (e) {
$(".image-radio-checked").each(function(i){
$(this).removeClass("image-radio-checked");
});
$(this).toggleClass("image-radio-checked");
e.preventDefault();
});
});
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border: 4px solid #f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

It seems to be working to me. You had some js errors because you weren't adding jquery to the fiddle...try here: https://jsfiddle.net/dwc6gf4q/6/
added jquery to fiddle

We can also do this using CSS just need to put IMG code after the radio button.
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
visibility:hidden;
}
.image-radio img {display:none;}
.image-radio input[type="radio"]:checked ~ img {display:block;}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

Toggle checkbox - click on parent DIV element

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>

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

Elements in bootstrap filterbar not correctly sized

I'm building a filter on top of my grid. I defined a custom filter class. In this filterclass I also try to incorperate a checkbox that is in the same style as my inputbox. For some reason I cannot get it the same size as the rest of my elements. Below the fiddle of what I'm doing. Can someone point me out what I'm doing wrong?
http://jsfiddle.net/52VtD/6763/
<div class="FilterBar">
<div>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon ">Set date</span>
<input type="text" class="form-control" />
<span class="input-group-addon">to</span>
<input type="text" class="form-control" />
</div>
</div>
<div>
<div class="input-group">
<span class="input-group-addon ">Group Flocks</span>
<span class="input-group-addon">
<input type="checkbox"/>
</span>
</div>
</div>
<div class="pull-right">
<button type="button" class="btn btn-warning pull-right">Filter</button>
</div>
.FilterBar {
position: relative;
display: table;
}
.FilterBar > div {
display: table-cell;
padding-right: 8px;
vertical-align: top;
}
.Toolbar .btn-group, .Toolbar .btn-group-vertical {
vertical-align: inherit;
}

.form-control has line-height: 1.42857;
.input-group-addon has line-height: 1;
See http://jsfiddle.net/52VtD/6766/ I added
.input-group-addon {
line-height: 1.42857;
}

U can add class "form-control" to Group Flocks and add one more class .some with line-height: 20px;
HTML
<div class="input-group">
<span class="input-group-addon form-control some">Group Flocks</span>
<span class="input-group-addon"> <input type="checkbox"/> </span>
</div>
And CSS:
.some {
line-height: 20px;
}
http://jsfiddle.net/52VtD/6764/ this is not the best solution
u can try to put all your line in div with class="row" and give all tabs some sizes like .col-xs-4