Develop Reference

Cordova Android javascript to check multiple checkbox values

This function executes when a button is tapped. All the code works except for the first 'if' statement when I am trying to check if both 'dland' and 'advent' are checked off. See the bold code below. That if statement should execute function 'randomItinerary1' if both the 'dland' and 'advent' checkboxes are marked. The problem must lie with checking the booleans of two checkboxes in one if statement and I need a workaround. Thank you all in advance for your time and consideration.
$("#q1").on("tap", function(){
//var cv2 = $('#advent:checked').val();
navigation(page2, page4);
**if ((document.getElementById('dland').checked) && (document.getElementById('advent').checked))** {
randomItinerary1();
}
else if (document.getElementById('dland').checked) {
randomItinerary2();
}
else if (document.getElementById('advent').checked) {
randomItinerary3();
}
else {
alert("You didn't select and parks");
}
});
});

Check below code, it works for all condition
https://jsfiddle.net/nvdhuLum/
$("#q1").on("click", function(){
if ((document.getElementById('dland').checked) && (document.getElementById('advent').checked)) {
alert("both checked")
}
if (document.getElementById('dland').checked) {
alert("dland checked")
}
if (document.getElementById('advent').checked) {
alert("advent checked")
}
else {
alert("You didn't select and parks");
}
});

Hide popover on body click only if already visible

Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?

In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO

You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.

How do I hide and unhide a DIV on my web page based on a checkbox check?

I tried this but it isn't working:
$('cbxShowNotifications').click(function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
});
EDIT -
Fixed a few things but I'm still unable to show the DIV AFTER I hide it:
$('#cbxShowNotifications').on('click', (function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
}));

change ($(this).checked) to ($(this).is(':checked'))

You have some syntax issues, and you should monitor the change event on checkboxes:
$('#cbxShowNotifications').on('change', function () {
var tview = $('#treeview');
if ($(this).prop('checked')) {
tview.show();
} else {
tview.hide();
}
});
NOTE: You can set the initial state by the trigger of the change event:
$('#cbxShowNotifications').trigger('change');

You can do it like this:
$('#treeview').on({
'change': function(){
if ($('div').css('display') == 'block') {
$('div').hide();
} else {
$('div').show();
}
}
})
jsfiddle: http://jsfiddle.net/PWAwz/

is this what you're searching? I wrote the codes below you can check they are working in example too. http://jsfiddle.net/jquerybyexample/xe7aL/
$(document).ready(function(){
$('.checkbox1').change(function(){
$('.tview').toggle('fast');
});
});

I know your question is related to jQuery, but if the purpose is purely presentational, perhaps you can consider a CSS way to accomplish the same thing:
#treeview {
display: none
}
#cbxShowNotifications:checked ~ #treeview {
display: block
}
You can take a look at an example here: http://jsfiddle.net/BZQX4/5/

click multiple elements to hide or show something - jquery

here is my script. Now i can click one of these IDs and class "inputs" are visible. What i want is that I have to click on all elements.
$('#zwei,#sechs,#neun').bind('click', function() {
if( $(this).is(':checked')) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
JSFiddle:
http://jsfiddle.net/CLYC6/20/
can you help me please? whats wrong?
FK

Use this:
$('#zwei,#sechs,#neun').bind('click', function() {
$('.inputs').show();
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
$('.inputs').hide();
return;
}
});
});
Here is a LIVE DEMO.
Because #Rastko is not happy with the current solution here is one more:
$('#zwei,#sechs,#neun').bind('click', function() {
var showInput = true;
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
showInput = false;
return;
}
});
if (showInput) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
One more LIVE DEMO.

If statement should check whether all three are checked, and if input is not visible.
so:
if($('#zvei').is(':checked') && $('#neun').is(':checked') && $('#sechs').is(':checked') {
$('.inputs').show();
}

selecting a element which has a class with jquery hasClass

I have four div with class name .s-list. When the user clicks on any of those divs .selected class is applied on the div.
What I am trying to do is while clicking on a button, check all those divs and if any one of them has a class .selected submit a form, else if none of the div has a class .selected show a error message.
The problem:
It works for the first time, but again if I click the button it shows the error message and submit the form when the div already has the class selected.
$("#pp-btn").click(function() {
$(".s-list").each(function (i) {
if(!$(this).hasClass('selected'))
{
$("#p-msg").show();
}
else {
$("#plans-form").attr('action', $(this).attr('links'));
$("#p-msg").hide();
}
});
});
I don't want the message to be displayed if any 1 of the div has class 'selected'.
Help please...

Use a jQuery selector to check if any s-list element has a selected class;
$('#pp-btn').click(function (e) {
if ($('.s-list.selected').length == 0) {
/* No `selected` class on any `s-list` */
$('#p-msg').show();
} else {
/* At least one `s-list` has the additional `selected` class */
$('#plans-form').attr('action', $('.s-list.selected').attr('links'));
}
});

$("#pp-btn").on('click',function() {
if($(".s-list.selected").length){
//there are selected items
} else {
//there is none
}
});

You could check like this :
if ($(".s-list.selected").length == 0) { $("#p-msg").show(); }
else {
$('#plats-form').attr('action', $('.s-list.selected').attr('links'));
$("#p-msg").hide();
}

$("#pp-btn").click(function() {
var submit = false;
$(".s-list").each(function (i) {
if($(this).hasClass('selected')) {
submit = true;
}
});
if(submit) {
$("#p-msg").show();
} else {
$("#plans-form").attr('action', $(this).attr('links'));
$("#p-msg").hide();
}
});