We Keep Coding

Javascript button not returning correct status

This is code for a button, but when it is checked it should print "checked" but everytime I press it, it logs "not checked" no matter the status of the button. How do I fix this?
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch');
function isChecked() {
if (checkbox.checked ) {
// do this
console.log('Checked');
} else {
// do that
console.log('Not checked');
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
isChecked();
}
);
<div id="auto-admit">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="autoadmit-switch"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label
id="autoadmit-switch-label"
class="mdc-button switch-label"
for="autoadmit-switch"
>Auto admit</label
>
</div>

You are trying to get the div container, rather than input.
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
function isChecked() {
if (checkbox.checked ) {
// do this
console.log('Checked');
} else {
// do that
console.log('Not checked');
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
isChecked();
}
);
<div id="auto-admit">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="autoadmit-switch"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label
id="autoadmit-switch-label"
class="mdc-button switch-label"
for="autoadmit-switch"
>Auto admit</label
>
</div>

How to show a div if input is checked

I did this code to show a div when people select one input radio, but doesn't work.
Unfortunately the input is inside a .tpl page (PrestaShop) and it's a group. So I did it calling the value 23. If I put some css it works, but when I set "show" the div stays hide. What is wrong?
$(document).ready(function () {
$('#group_1 input').each(function () {
if ($(this).val() == ('23') && $(this).is(':checked')) {
$('#showtext').show();
} else {
$('#showtext').hide();
}
});
});
{elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left">
<label class="accordion--form__label">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}

$(document).ready(function() {
$('#group_1 input').each(function() {
if ($(this).val() == ('23') && $(this).is(':checked')) {
$('#showtext').show();
} else {
$('#showtext').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "group_1" >
<input class = "input-radio" type = "radio" data-product-attribute = "data-product-attribute" name = "test" value = "23" checked>
</div>
<div id = "showtext" >Show text </div>
You can see code above is working absolutely fine. You have applied display:none !important;to showtext in your css code.

Panels with validation

I have a field within the first panel and third panel. When there is an empty field and I click "Next" on panel one, the validation does not display the "please enter first name". Once I get to the third panel and select "Next", then the validation displays "Please enter name". Is there a way I can have the validation display the notification when there are empty fields based on its specific panel rather than going to the third panel and then seeing the validation?
One aspect I notice: when panel 3 field is not empty, and "Next" is selected, I cant proceed to the fourth panel because the input is empty in panel 1. This occurs vice versa. (if validation displays in panel 1, and then fields are entered, "Next" will not proceed to third panel).
What I tried
I tried to target the buttons and remove the class that is targeted by validation. It did not work because validation value is live on all panels 1-4. If I get a thumbs down please inform me on why, so I can improve on my questions next time. Thank you for your time!
$(document).ready(function() {
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
var $panelControlButtons =
$('#panelcontrol button')
.filter('.btnPrev')
.prop('disabled', true)
.end();
$('#panelcontrol')
.on('click', 'button', function(e) {
e.preventDefault();
switch (true) {
case $(this).hasClass('btnNext'):
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
$('.btnNext').click(function(e) {
var focusSet = false;
// validate email - not empty
//FIRST NAME
if (!$('#first').val()) {
if ($("#first").parent().next(".validation").length == 0) {
$("#first").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter first name</div>");
}
//e.preventDefault();
$('#first').focus();
focusSet = true;
} else {
//ok
$("#first").parent().next(".validation").remove();
}
//after all validate
if (focusSet) {
$("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
//THIRD NAME
if (!$('#third').val()) {
if ($("#third").parent().next(".validation").length == 0) {
$("#third").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter third name</div>");
}
//e.preventDefault();
$('#third').focus();
focusSet = true;
} else {
//ok
$("#third").parent().next(".validation").remove();
}
//after all validate
if (focusSet) {
$("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
});
if ($newFieldset.is('.two')) {
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
}
//$('.two').removeClass('active'); this removes the second panel when selecting prev button
if ($newFieldset.is(':nth-child(2)')) {
$panelControlButtons
.next();
}
//enable Prev button
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', false);
$('.btnPrev_one_time').css('display', 'block');
//disabled Next button
if ($newFieldset.is(':last-child')) {
$panelControlButtons
.filter('.btnNext')
.prop('disabled', true);
$(':last-child').find(".btnNext_one_time").text("Place Payment"); //once last child element, btn will change text
}
break; // btnNext
var $input =
$('input')
.filter('.active')
.end();
case $(this).hasClass('btnPrev'):
var $newFieldset =
$fieldsets
.filter('.active') //selects the current fieldset
.hide() //hide it
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show();
// testing only $('.two').css('display','none').removeClass('active').next().addClass('active').show().filter();
$('.two').css('display', 'none').filter('.active')
.filter('.active') //selects the current fieldset
.hide() //hide it
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show();
//and show it
// enable Next button
$panelControlButtons
.filter('.btnNext')
.prop('disabled', false);
// disable Prev button
if ($newFieldset.is(':first-child')) {
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', true);
}
break; // btn Prev
}
}); // panelcontrol button handler
$('.check_box').on('change', function() {
if (this.checked) {
$("#second_panel").removeClass('two');
} else {
$("#second_panel").addClass('two');
}
});
});
.sets {
display: none;
}
.active {
display: block;
}
<!doctype html>
<html lang="engl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="jquery/main.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="panels">
<div class="sets active">
<h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
<div>
<label for="first">First Name</label>
<input type="first" id="first" placeholder="" />
</div>
</div>
<div id="second_panel" class="sets two">
<h1>PANEL 2</h1>
<p>w</p>
<div>
<label for="second">Second Name</label>
<input type="second" id="second" placeholder="" />
</div>
</div>
<div class="sets three">
<h1>PANEL 3</h1>
<div>
<label for="third">Third Name</label>
<input type="third" id="third" placeholder="" />
</div>
</div>
<div class="sets active">
<h1>PANEL 4</h1>
<div><input name="ss4" value="" /></div>
</div>
</div>
<form action="">
<input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
</form>
</div>
<div id="panelcontrol">
<button class="btnPrev">Prev</button>
<button class="btnNext" id="c">Next</button>
<button class="btnNext_one_time">CONTINUE</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>
</html>

There's quite a bit you could do to clean up your code. But if you want to show the validation message as soon as the user does something incorrect then you need your validation function to return as soon as it runs and encounters an issue. Below is an example which shows an error immediately if user doesnt enter and value for first name.
EDIT:
var next = document.getElementById('btnNext');
var previous = document.getElementById('btnPrev');
var inputs = [document.getElementById('first'), document.getElementById('second'), document.getElementById('third')];
function init() {
//show first panel and hide other initially
document.getElementById('first_panel').className = 'active';
document.getElementById('second_panel').className = 'sets';
document.getElementById('third_panel').className = 'sets';
document.getElementById('fourth_panel').className = 'sets';
//disable the buttons initially
previous.disabled = true;
previous.addEventListener('click', displayPreviousPanel);
next.disabled = true;
next.addEventListener('click', displayNextPanel);
//add keyup event listeners to the text inputs
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('keyup', function() {
//addEventListener has 'this' bound to current element
if (validateInput(this.value)) {
next.disabled = false;
} else {
next.disabled = true;
}
});
}
}
function displayPreviousPanel() {
//should only be 1 active at a time
var currentlyVisible = document.getElementsByClassName('active')[0];
var keyupEvt = new Event('keyup');
switch (currentlyVisible.id) {
case 'second_panel':
document.getElementById('second_panel').className = 'sets';
document.getElementById('first_panel').className = 'active';
document.getElementById('first').dispatchEvent(keyupEvt);
this.disabled = true;
break;
case 'third_panel':
document.getElementById('third_panel').className = 'sets';
document.getElementById('second_panel').className = 'active';
document.getElementById('second').dispatchEvent(keyupEvt);
break;
case 'fourth_panel':
document.getElementById('fourth_panel').className = 'sets';
document.getElementById('third_panel').className = 'active';
document.getElementById('third').dispatchEvent(keyupEvt);
break;
}
}
function displayNextPanel() {
//disable next button again
this.disabled = true;
//undisable previous btn
previous.disabled = false;
//should only be 1 active at a time
var currentlyVisible = document.getElementsByClassName('active')[0];
switch (currentlyVisible.id) {
case 'first_panel':
document.getElementById('first_panel').className = 'sets';
document.getElementById('second_panel').className = 'active';
previous.disabled = false;
break;
case 'second_panel':
document.getElementById('second_panel').className = 'sets';
document.getElementById('third_panel').className = 'active';
break;
case 'third_panel':
document.getElementById('third_panel').className = 'sets';
document.getElementById('fourth_panel').className = 'active';
break;
}
}
//the function used to validate..add whatever you need here
function validateInput(value) {
var isValid = true;
if (value.length < 1) {
isValid = false;
}
return isValid;
}
init();
.sets {
display: none;
}
.active {
display: block;
}
<div id="container">
<div id="validationMsg"></div>
<div id="panels">
<div id="first_panel" class="sets active">
<h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
<div>
<label for="first">First Name</label>
<input type="first" id="first" placeholder="" />
</div>
</div>
<div id="second_panel" class="sets two">
<h1>PANEL 2</h1>
<p>w</p>
<div>
<label for="second">Second Name</label>
<input type="second" id="second" placeholder="" />
</div>
</div>
<div id="third_panel" class="sets three">
<h1>PANEL 3</h1>
<div>
<label for="third">Third Name</label>
<input type="third" id="third" placeholder="" />
</div>
</div>
<div id="fourth_panel" class="sets active">
<h1>PANEL 4</h1>
<div>
<label for="second">Fourth Name</label>
<input name="ss4" value="" /></div>
</div>
</div>
<form action="">
<input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
</form>
</div>
<div id="panelcontrol">
<button class="btnPrev" id="btnPrev">Prev</button>
<button class="btnNext" id="btnNext">Next</button>
<button class="btnContinue">CONTINUE</button>
</div>

display message when 2 bootstraptoggle checkboxes are selected

I am trying to get a message to pop up when a user selects 2 bootstrap toggle checkboxes. I have this set up so far:
My html:
<div>
<p id="enable-msg"><span class="glyphicon glyphicon-thumbs-up"></span></p>
<p id="disable-msg"><span class="glyphicon glyphicon-thumbs-down"></span></p>
<label for="cure">
<input type="checkbox" id="Checkbox1" onclick="showHide();" onchange="ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')" >
Criteria 1</label>
</div>
<div>
<p id="enable-msg2"><span class="glyphicon glyphicon-thumbs-up"></span></p>
<p id="disable-msg2"><span class="glyphicon glyphicon-thumbs-down"></span></p>
<input type="checkbox" id="Checkbox2" onchange="ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')" unchecked/>
<label for="shortTerm" class="control-label">Criteria 2</label>
<br>
<label class="curemsg green" id="Text1"> Message </label>
</div>
My javascipt:
$('input[type="checkbox"]').click(function () {
$('.curemsg').hide();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) $('.curemsg').show();
});
$(document).ready(function() {
$("input#Checkbox1").bootstrapSwitch({});
ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')
});
$(document).ready(function() {
$("input#Checkbox2").bootstrapSwitch({});
ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')
});
function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
var check_box = document.getElementById(checkId)
var first_alert = document.getElementById(firstCommentId);
var second_alert = document.getElementById(secondCommentId);
if (check_box.checked == true) {
first_alert.style.visibility = "visible";
first_alert.style.display = "inline-block";
second_alert.style.visibility = "hidden";
second_alert.style.display = "none";
} else {
first_alert.style.visibility = "hidden";
first_alert.style.display = "none";
second_alert.style.visibility = "visible";
second_alert.style.display = "inline-block";
}
}
My CSS:
#enable-msg,
#enable-msg2 {
display: inline;
color: green;
}
#disable-msg,
#disable-msg2 {
display: inline;
color: red;
}
.curemsg {
display: none;
}
.green {
background: #00ff00;
}
Here is my Jsfiddle
Ultimately I will have about 10 toggleswitches but I want to be able to display a message when 2 specific toggleswitches/checkboxes have been selected.
Thank you

chech/unchek all checkboxes (dynamically generated)

I have a view with checkboxes, generated dynamically, and a button for chech/unchek all the checkboxes. I try the code bellow but, the checkboxes are not checked ob button click event. Please help.
Thank you.
View with checkboxes:
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
#for (int i = 0; i < #Model.workDaysList.Count; i++)
{
<div class="framed">
<div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<h3>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">
<label for="#Model.workDaysList[i][0]" data-theme="c">
#Model.workDaysList[i][1].Substring(6, 2)/#Model.workDaysList[i][1].Substring(4, 2)/#Model.workDaysList[i][1].Substring(0, 4)
</label>
</span>
</div>
</h3>
#Model.detailDaysList[i][0] / #Model.detailDaysList[i][1]
<br />
#Model.detailDaysList[i][2] / #Model.detailDaysList[i][3]
<br />
#Model.detailDaysList[i][4] h
</div>
</div>
</div>
}
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
});
</script>

Try This:
<script lang='javascript'>
$(document).ready(function(){
$('#selectinvert').click(function(){
$("input[type='checkbox']").each(function (){
if($(this).is(':checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
})
});
</script>

there are closing }) missing..
btw: the toggle can written like this:
this.checked = !this.checked

Try to start with a basic HTML code and build upon that! Your model code might be braking your HTML. You can find the working prototype here!
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">First</span>
</div>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">Second</span>
</div>
</div>
$("#selectinvert").click(function() {
$("INPUT[type='checkbox']").each(function() {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});

As others suggest, you were missing closing brackets.
You could also shorten your code a bit:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
Also note that your problem has nothing to do with ASP.NET or jQuery UI.
​

try
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','checked');
}
})
});

I think the code you have written will only only work when all the checkboxes are either checked or unchecked..
What happens when some of them are checked.. Your code will just toggle those..
Your logic should be dependent on the button and not the checkboxes..
$(document).ready(function() {
var isChecked = false;
$("#selectinvert").click(function() {
var $checkboxes = $("INPUT[type='checkbox']") ;
if(isChecked){
isChecked = false;
}
else{
isChecked = true;
}
$checkboxes.prop('checked' , isChecked);
});
});​