please help.
I created two dropdowns that displays selected checkboxes with icons.
the problem is those two dropdowns is not acting independently.
If I change something in dropdown 2 (What security does the space have)
all content from dropdown 1 is also added.
I need the dropdown functionality to work on multiple dropdowns.
Note: I need I icons to be added in the selected checkbox. ie
in the dropdown-toggle div where the selected checkbox is being displayed :)
Also the selected checkbox is not displaying right away. i need to click it again in order to display the selected checkbox
https://jsfiddle.net/gilbertlucas46/szyz4031/4/
function getValueUsingClass(){
$(".checkbox-list li label").click(function() {
/* declare an checkbox array */
var features_checkedBox = []
/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$(" .checkbox-list li input:checked + label").each(function() {
allChecked = $(this).html();
features_checkedBox.push(allChecked);
$(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
});
})
}
getValueUsingClass();
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('checkbox-list')) {
e.stopPropagation();
}
});
.dropdown-select .dropdown-toggle {
background: #71c621;
background: linear-gradient(135deg, #71c621 0%, #5bab41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71c621', endColorstr='#5bab41',GradientType=1 );
width: 100%;
height: 42px;
line-height: 42px;
padding: 0;
font-size: 14px !important;
font-weight: normal;
border: 2px solid #71c621;
position: relative;
overflow: hidden;
}
.dropdown-select .dropdown-menu {
display: none;
}
.dropdown-select {
position: relative;
}
.dropdown-select.open .dropdown-menu {
display: block !important;
width: 100%;
top: 50px;
}
label {
cursor: pointer;
display: block;
border-bottom: 1px solid gray;
width: 100%;
}
input {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
<div class="col col-md-6">
<fieldset data-form-field="required-group" class="suitability">
<legend>What is the space suitable for </legend>
<div class="button-group dropdown dropdown-select checkDropdowns">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Suitable for? <i class="glyphicon glyphicon-menu-down"> </i></a>
<ul class="checkbox-list dropdown-menu">
<li>
<input type="checkbox" id="transactable-storage-purpose-clothes" value="Clothes" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-clothes">
<i class="glyphicon glyphicon-volume-off"></i> Clothes
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-caravan" value="Caravan" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-caravan">
<i class="glyphicon glyphicon-flag"></i> Caravan
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-boat" value="Boat" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-boat">
<i class="glyphicon glyphicon-headphones"></i> Boat
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-car" value="Car" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-car">
<i class="glyphicon glyphicon-backward"></i>Car
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-furniture" value="Furniture" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-furniture">
<i class="glyphicon glyphicon-resize-small"></i> Furniture
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-docs" value="Office Docs" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-docs">
<i class="glyphicon glyphicon-plane"></i> Office Docs
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-trailer" value="Trailer" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-trailer">
<i class="glyphicon glyphicon-magnet"></i> Trailer
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-workshop" value="Workshop" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-workshop">
<i class="icon icon-workshop"></i> Workshop
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-container" value="Container" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-container">
<i class="glyphicon glyphicon-leaf
glyphicon "></i> Container
</label>
</li>
</ul>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col col-md-6">
<fieldset class="security">
<legend>What security does the space have <a href="#" data-toggle="popover" data-content="Let prospective renters know what security features your space has. You can select multiple options.">
<i class="fa fa-question-circle"></i></a></legend>
<div class="button-group dropdown dropdown-select checkDropdowns detailsDrop">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select Security Features <i class="glyphicon glyphicon-menu-down"> </i></a>
<ul class="checkbox-list dropdown-menu">
<li data-value="<i class='icon icon-alarm'">
<input type="checkbox" id="transactable-security-alarm" value="4750" data-security="">
<label for="transactable-security-alarm">
<i class="icon icon-alarm"></i> <span class="title">Alarm</span>
</label>
</li>
<li data-value="<i class='icon icon-cctv'">
<input type="checkbox" id="transactable-security-cctv" value="4751" data-security="">
<label for="transactable-security-cctv">
<i class="icon icon-cctv"></i> <span class="title">CCTV</span>
</label>
</li>
<li data-value="<i class='icon icon-deadlock'">
<input type="checkbox" id="transactable-security-deadlock" value="4752" data-security="">
<label for="transactable-security-deadlock">
<i class="icon icon-deadlock"></i> <span class="title">Deadlock</span>
</label>
</li>
<li data-value="<i class='icon icon-security-bars'">
<input type="checkbox" id="transactable-security-security-bars" value="5960" data-security="">
<label for="transactable-security-security-bars">
<i class="icon icon-security-bars"></i> <span class="title">Security Bars</span>
</label>
</li>
<li data-value="<i class='icon icon-lock'">
<input type="checkbox" id="transactable-security-combination-lock" value="4753" data-security="">
<label for="transactable-security-combination-lock">
<i class="icon icon-lock"></i> <span class="title">Combination Lock</span>
</label>
</li>
<li data-value="<i class='icon icon-roller-door'">
<input type="checkbox" id="transactable-security-security-roller-door" value="4754" data-security="">
<label for="transactable-security-security-roller-door">
<i class="icon icon-roller-door"></i> <span class="title">Security Roller-door</span>
</label>
</li>
</ul><!-- checkbox-list dropdown-menu -->
</div>
</fieldset>
</div>
</div>
The problem with your code is that $(" .checkbox-list li input:checked + label") is not depending on the dropdown the handler is invoked on.
Additionally, the first value is not recognized due to the discrepenzie between the click-event of the label and thechange`-event of the input.
I changed your code a bit:
$('.checkbox-list input').on('change', function() {
var $this = $(this).parents('.checkbox-list');
var features_checkedBox = [];
$this.find('input:checked').each(function() {
allChecked = $(this).next('label').html();
features_checkedBox.push(allChecked);
$(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
});
});
Example
You might want to optimize the example to fit your needs.
Related
In this code I use dropdown as an example
<div class="dropdown">
<button class="btn btn-light btn-block dropdown-toggle" type="button" id="bahagian" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bahagian </button>
<div class="dropdown-menu" id="checkboxes1" aria-labelledby="bahagian" style="height: auto; max-height: 200px; overflow-x: hidden; width: 100%;">
<li class="dropdown-item">
<input type="checkbox" name="bahagian[]" value="JB"><label>Johor Bahru</label>
</li>
<li class="dropdown-item">
<input type="checkbox" name="bahagian[]" value="TE"><label>Tebrau</label>
</label>
<li class="dropdown-item">
<input type="checkbox" name="bahagian[]" value="PG"></label>Pasir Gudang</label>
</li>
</div>
<div id="output1" class=""></div><br>
</button>
</div>
Currently this is the javascript code I used to display it values and it working but how to display the label?
<script>
$("#checkboxes input").click(function () {
$("#output").text($("#checkboxes input:checked").map(function () {
return $(this).val();
}).get().join());
}).click().click();
</script>
there're some errors in your code. here is what I have (https://jsfiddle.net/7a1moxqc/)
<div class="dropdown">
<button class="btn btn-light btn-block dropdown-toggle" type="button" id="bahagian" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bahagian </button>
<div class="dropdown-menu" id="checkboxes1" aria-labelledby="bahagian" style="height: auto; max-height: 200px; overflow-x: hidden; width: 100%;">
<li class="dropdown-item">
<input type="checkbox" id="jb" name="bahagian[]" value="JB"><label for="jb">Johor Bahru</label>
</li>
<li class="dropdown-item">
<input type="checkbox" id="te" name="bahagian[]" value="TE"><label for="te">Tebrau</label>
</li>
<li class="dropdown-item">
<input type="checkbox" id="pg" name="bahagian[]" value="PG"><label for="pg">Pasir Gudang</label>
</li>
</div>
<div id="output1" class=""></div><br>
</div>
$("input:checkbox").on("change", function() {
var out = $("input:checked").map(function() {
var id = $(this).attr("id");
return $("label[for='" + id + "']").html();
});
$("#output1").text([...out].join(", "));
});
I implement a draggable checkbox dropdown list. If i get the dragging element value using sortable change function. but it shows index values are wrong. For example in my case when i drag the list element to bottom in the dropdown list it shows index value in the console (value is 6). But actually it is wrong. I have only 6 element and final index is 5. Why is it show wrong index?
I will give full implementation code Here.
Do not examine the Placeholder; it's index is off due to the original element still being attached until it is dropped.
Consider the following.
$(function() {
$(".dropdown-menu").sortable({
start: function(event, ui) {
console.log('start', ui.item.index());
ui.item.data('start_pos', ui.item.index());
},
change: function(event, ui) {
console.log('start', ui.item.data('start_pos'), "index", ui.item.index());
},
update: function(event, ui) {
console.log('start', ui.item.data('start_pos'), "index", ui.item.index());
}
});
$(".dropdown-menu").disableSelection();
});
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
<div class="btn-group show">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Columns <b class="caret"></b>
</button>
<ul class="dropdown-menu dropdown-menu-right ui-sortable show" id="colsDrop" style="position: absolute; transform: translate3d(-10px, 38px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="bottom-end">
<li class="ui-sortable-handle">
<div class="checkbox">
<label>
<input checked="" type="checkbox" class="toggle-vis" data-column="Position"> Position
</label>
</div>
</li>
<li class="ui-sortable-handle" style="">
<div class="checkbox">
<label>
<input checked="" type="checkbox" class="toggle-vis" data-column="Name"> Name
</label>
</div>
</li>
<li class="ui-sortable-handle">
<div class="checkbox">
<label>
<input checked="" type="checkbox" class="toggle-vis" data-column="Office"> Office
</label>
</div>
</li>
<li class="ui-sortable-handle">
<div class="checkbox">
<label>
<input checked="" type="checkbox" class="toggle-vis" data-column="Age"> Age
</label>
</div>
</li>
<li class="ui-sortable-handle">
<div class="checkbox">
<label>
<input checked="" type="checkbox" class="toggle-vis" data-column="Start Date"> Start date
</label>
</div>
</li>
<li class="ui-sortable-handle">
<div class="checkbox">
<label>
<input checked="" type="checkbox" class="toggle-vis" data-column="Salary"> Salary
</label>
</div>
</li>
</ul>
</div>
</div>
When clicking on button #btn-modal-clear I would like to select and add a class to the li where it's sub-child input is empty (value=""). How do I do this?
html:
<li>...<li>
<li>
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
js:
$('#btn-modal-clear').on('click', function() {
$('.select-name').multiselect('select', ['']);
$('.select-name').multiselect('updateButtonText');
... .addClass("active");
});
So result should be:
html:
<li>...<li>
<li class="active">
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
Fiddle: https://jsfiddle.net/ewm9pbqv/
You can use .filter() with .addClass() in this case:
$('li').filter(function() {
return $(this).find('input:radio').val() == "";
}).addClass('active');
Try this
$('li input[value=""]').closest("li").addClass('active');
I am typing to apply css on alternate elements which have [data-row="row"]
Something like:
[data-row="row"]:nth-of-type(odd) {
background-color: #B7CEEC;
}
<div class="pricingdiv" style="width:100%;min-height: 100px;background-color:white;">
<ol class="pricingList">
<li class="LotLi">
<div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title^lotstextarea~"asdad"^file_uploadlot~LotFile472cb2d^lottype~value^txtbiddecrement~123^txtfrontbuffer~^txtbackbuffer~">Lot Title-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span> <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
</div>
<ol class="lotchildlist">
<li class="LineitemLi" title="Left Click to see more.">
<div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="3" data-quantity="2332" data-extendedprice="2" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span> <span clas="quantity" style="padding-left:130px">2332</span>
<span
class="extendedprice" style="padding-left:130px">'2'</span> <span class="saving" style="padding-left:130px">'23'</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
<div class="lineitemdescription" data-row="row">'ads'</div>
</div>
</li>
<li class="LineitemLi" title="Left Click to see more.">
<div class="addedlineitem" data-row="row" data-ceilingprice="342" data-historicprice="2323" data-reserveprice="432" data-quantity="33" data-extendedprice="434" data-saving="">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">342</span> <span class="quantity" style="padding-left:130px">33</span>
<span
class="extendedprice" style="padding-left:130px">'434'</span> <span class="saving" style="padding-left:130px">''</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
<div class="lineitemdescription" data-row="row">'asdad'</div>
</div>
</li>
</ol>
</li>
<li class="LotLi">
<div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title2^lotstextarea~"asdad"^file_uploadlot~LotFile6b238d6^lottype~value^txtbiddecrement~23^txtfrontbuffer~^txtbackbuffer~">Lot Title2-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span> <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
</div>
<ol class="lotchildlist">
<li class="LineitemLi" title="Left Click to see more.">
<div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="23" data-quantity="232" data-extendedprice="23" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span> <span class="quantity" style="padding-left:130px">232</span>
<span
class="extendedprice" style="padding-left:130px">'23'</span> <span class="saving" style="padding-left:130px">'23'</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
<div class="lineitemdescription" data-row="row">'asd'</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
I would prefer pure CSS solution to this. Thanks.
DEMO IS HERE
.pricingList > li:nth-of-type(odd)>div[data-row="row"] {
background-color: red;
}
.pricingList > li:nth-of-type(even)>div[data-row="row"]{
background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(odd) [data-row="row"]{
background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(even) [data-row="row"]{
background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(odd) [data-row="row"]{
background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(even) [data-row="row"]{
background-color: blue;
}
The alternating rows are the li, in which you have the data-row attribute. So:
li:nth-of-type(odd) [data-row="row"] {
background-color: #B7CEEC;
}
I am trying to figure out how to vertically stack two buttons (up and down) next to the input they influence. I want to do this with CSS and HTML.
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
As you can see I am using Font Awesome for the up and down chevrons. I am unsure as how to get the two buttons to stack. Once I do I will tie in the JS to control the text input value (already written).
An example of what I am working with can be found here: http://codepen.io/anon/pen/WvydgZ
I have plugged in jQuery, jQuery UI, and FontAwesome.
The desired affect is this:
Any ideas?
I think you should use a grid system if you can to accomplish tasks like this for you. In addition, try not to use <span> unless you want simple inline content. I did some tweaking trying to stay to your original as much as possible...
.row div{
float: left;
}
.input-row{
line-height: 30px;
height: 30px;
}
input{
height: 30px;
}
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.buttons{
width: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-row">
<div class="styled-value">
<div class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</div>
</div>
</div>
<div class="buttons">
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
Try using a list as a wrapper for the buttons. An example building off of yours:
HTML
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size"/>
</span>
</span>
<ol class="no-style-list">
<li>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
</li>
<li>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</li>
</ol>
CSS
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.no-style-list {
list-style-type: none;
padding-left:0;
display: inline-block;
}
http://codepen.io/anon/pen/KpeZOe
One option is place the input and buttons in a table. The buttons should have display:block. Like so
<table class='content'>
<tr>
<td>
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
</td>
<td>
<div class='button-wrapper'>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</td>
</tr>
</table>
demo