This question already has answers here:
How to check "checkbox" dynamically - jQuery Mobile
(4 answers)
Closed 8 years ago.
I am trying to put a checkbox like control in the Navbar which should behave like a toggle. When I first select the navbar button it should select all the checkboxes below and clicking again will reset the checkbox.
Here is the code I have to display the controls
<div data-role="page" id="index">
<div data-role="header" data-position="fixed" >
<div data-role="navbar">
<ul><li>All</li></ul>
</div>
</div>
<div data-role="content" id="content">
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0"/>
</div>
Message 1
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
</div>
Message 2
</li>
</ul>
</div>
</div>
The JSfiddle link is http://jsfiddle.net/8dyn9e7s/
How do I select all checkboxes on the click on the button and deselect all checkboxes on an another click.
Regards
Malai
You can solve this in three lines of jQuery:
$("#checkAll").on("click", function(){
$("input").prop("checked", !$("input").prop("checked"));
});
All you need to do is add an id to your toggle button as seen here:
http://jsfiddle.net/8dyn9e7s/3/
You can listen to the click event for whatever element, in this case your All checkbutton, and then select all the checkboxes and set the checked property using .prop(). Here's an updated fiddle showing the checks toggling on and off. http://jsfiddle.net/8dyn9e7s/1/
Edit: I would suggest giving your link a unique class to listen for, or an id, so it doesn't have to listen to just the ui-click class. Also you may want to handle a case where you don't have any checkboxes otherwise the condition check won't work and it would be better to scope your checkboxes with a class as well so you don't just grab all of them like the example
And one more version:
$('.ui-navbar .ui-btn').click(function(e) {
$('#content :checkbox').prop('checked', $(this).toggleClass('ui-btn-active').hasClass('ui-btn-active'));
e.stopPropagation();
e.preventDefault();
});
Important part here is that you also need to take care of removing active class from the navigation button when in unchecked state.
Demo: http://jsfiddle.net/8dyn9e7s/4/
Related
I'm making a content slider for my project but I have very little expirience in AngularJS.
I've found this plunker which suits my needs greatly. You can see my live page here. It is in russian language, but I hope it wont be a problem. Slider is in the middle of the page - a section with 8 cards.
So the problem is:
Slider is controlled by the arrows below it. Still if you click on the red button inside the card it will update the model and classes ng-enter and ng-leave will be applied to the parent container which will result in slider animation. Well, the problem becomes obvious if you just click these red buttons.
Is there any way to make these red buttons not apply ng-enter and ng-leave classes to the container div?
UPDATE: Here is a plunker, that illustrates my problem. The animation must happen when you click on Prev and Next buttons. But it happens when you click on "Choose" or "Choosen" links, which updates the model.
This is a markup
<body ng-controller="MainCtrl">
<div class="page-container">
<div class="gift-page" ng-class="direction" ng-repeat="page in gifts | partition: 6 | offset: currentPage | limitTo: 1">
<ul class="gift-list clearfix">
<li class="gift" ng-repeat="gift in page">
<div class="gift-item">
<div class="gift-details">
<h3>{{gift.title}}</h3>
<span class="points">{{gift.points}} points</span>
Choose
Chosen
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="controls">
<button ng-click="prev()">Prev</button>
<button ng-click="next()">Next</button>
</div>
</body>
Quick, but not the best solution is to turn off animation before action and turn on after:
$scope.addToBasket = function(gift){
$animate.enabled(false);
gift.ordered = true;
$timeout(function(){
$animate.enabled(true);
})
}
Here is plunk.
Will look for better solution later))
Can try adding $event.stopPropagation(); to the ng-click event, in your case:
Выбрать
I am using semantic-ui and I want to show some info text in dropdown. But it act as a link even it's a <div class="header item">
Here profile, settings and logout are link and rest are text(non-clickable)
sample mockup I tried with.
<div class="ui dropdown item">
<i class="icon dropdown"></i>
<div class="menu hidden">
<div class="header item">Narottam Guattom</div>
Action one
Action one
Action one
</div>
</div>
Semantic-ui treat that div as a link and dropdown get closed on click.
Is there better way to implement this in semantic-ui Or how can I prevent click event.
You should customize items selector. Try to use next code
$.fn.dropdown.settings.selector.item = '.menu > .item:not(.header)'; // change selector for all dropdowns
Also you can specify item selector locally. Read more about dropdown DOM settings to configure it properly
$( ".header " ).click(function( event ) {
event.preventDefault();
........//Custom code
});
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
I have created a drop down menu with animals. But what I wanna do now is, after I have selected one of the animals from the drop down, can I 'display' a checkbox button? Like... hide it initially and then after I have select one of the animals and click on it, the checkbox button will be visible?
I can only do on the code for drop down menu...
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">animals</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
Dogs
Cats
Cow
Goats
Tiger
</div>
</li>
Help please!
using jquery like :
Dogs
<input id="chkdogs" type="checkbox" name="dogs" value="dog" style="display:none;">
What I would suggest you do is:
Add the checkboxes dynamically when an onclick event occurs.
Or hardcode the checkboxes next to each animal then hide them. Then use the onclick event to reveal them.
Lastly use jquery, it's easier
I'm currently working on something to check a box and change the text next to it to a hyperlink once ticked
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<span>myLink</span>
</li>
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<spanmyLink></span>
</li> .. and so on
Hopefully from this you can gather i have 2 items, and i want one visible as default until checkbox is ticked and the hyperlink span tag takes over from the default span tag. That changes to style="display:none" other becomes style="display:block"
Now for the jQuery
$(window).load(function(){
$('.myCheckBox').click(function(){
//DO DOMETHING
});
});
But once I make the click event occur how to i gain access to these spans and such in order to change the styles of the various elements etc.
Thanks
You would go from this, which is the current element then use any of the tree traversal functions to move around the DOM, for example:
$(window).load(function(){
$('.myCheckBox').change(function() {
$(this).next("span").toggle(this.checked);
});
});
In the above we're using .toggle(bool) to do the hiding/showing, this allows us to hide/show the <span> depending on whether the checkbox we care about is checked.