We Keep Coding

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.

Targeting only one select in jquery not all of them

Targeting only one toggle (the next div after select) in jquery not all of them
This works except it shows all of the toggle when I only want it to show just the one underneath it.
Heres the html
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
$("#pane").customScrollbar("resize", true);
});
});
Heres the html
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 1
</div>
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 2
</div>

You should try :first selector
$(function () {
$(".binary:first").change(function() {
if($(this).val() == "0"){
$(this).next(".toggle").hide();
} else {
$(this).next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});

try following
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$(this).parent().parent().parent().next().hide();
} else {
$(this).parent().parent().parent().next().show();
}
$("#pane").customScrollbar("resize", true);
});
});

This is similar to #Ganesh's answer but has greater specificity, which might be important in your scenario.
$(".toggle").hide();
$(function () {
$(".binary").change(function () {
if ($(this).val() == "0") {
console.log($(this).closest('div.option.checkbox').length);
$(this).closest('div.option.checkbox').next(".toggle").hide();
} else {
$(this).closest('div.option.checkbox').next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});

You can use jQuery's .next() method.
$(function () {
$(".binary").change(function() {
if($(this).val() == 0){
$(this).parents("div.checkbox").next('.toggle').hide();
} else {
$(this).parents("div.checkbox").next('.toggle').show();
}
$("#pane").customScrollbar("resize", true);
});
});
Here is a Demo Fiddle.

Show div when textbox value is same as another div's content

I am making a quiz in which the answer will be random. I want the "Correct!" div to show when the textbox value is the same as another div.
Here's what I've got so far:
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == '#answer') {
$("#correct").show("fast"); //Slide Down Effect
}
else {
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
<p>What is the animal?</p>
<div id="correct">
That's Correct!
</div>
<div id="incorrect">
Sorry, Try again!
</div>
<div id="answer">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>

Use
$('#answer').text()
instead of just
'#answer'
in the if statement.

if ($('#full_day').val() == $('#answer').text())
This is case sensitive. To make it case insensitive:
if ($('#full_day').val().toLowerCase() == $('#answer').text().toLowerCase())
Edit: As requested, here is a solution which allows multiple answers:
$('#check').bind('click', function() {
var possibleAnswers = $('#answers').text().toLowerCase().split(' ');
var givenAnswer = $('#user-answer').val().toLowerCase();
var isAnswerCorrect = false;
for (var indexPossibleAnswers = 0; indexPossibleAnswers < possibleAnswers.length; indexPossibleAnswers++)
{
if (possibleAnswers[indexPossibleAnswers] == givenAnswer)
{
isAnswerCorrect = true
break;
}
}
if (isAnswerCorrect)
{
alert('Correct');
}
else
{
alert('Incorrect, try again.');
}
});
Live demonstration.

$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == $('#answer').html()) {
$("#correct").show("fast"); //Slide Down Effect
}
else {
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
<p>What is the animal?</p>
<div id="correct" style="display:none;">
That's Correct!
</div>
<div id="incorrect" style="display:none;">
Sorry, Try again!
</div>
<div id="answer" style="display:none;">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>

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);
});
});​

How can I check if a checkbox is checked?

I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code.
<script type=text/javascript>
function validate(){
if (remember.checked == 1){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
But for some reason or another it doesn't execute it.
Please help !
----EDIT-----
This is what I have for the moment.
<DIV data-role="content" data-theme="g">
<DIV class=ui-grid-g-login>
<FORM method=post action=[$=PROBE(266)/] data-theme="C">
<P>~DATA_ERROR~</P>
<div id="mail" data-role="fieldcontain">
<label for="mail">Email:*</label>
<input id="mail" name="mail" type="email" />
</div>
<div id="pass" data-role="fieldcontain">
<label for="pass">Paswoord:*</label>
<input id="pass" name="pass" type="password" />
</div>
<div id="remember" data-role="fieldcontain">
<label for="remember">Onthoud mij</label>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
</div>
<P><INPUT class=btn name=submit value=Login type=submit onclick="validate()"></P>
</FORM>
</DIV>
</DIV><!-- /content -->
<script type=text/javascript>
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
----EDIT--
Solved it, the problem was that the fieldcontain was also named 'remember'

checked is a boolean property, so you can directly use it in an if condition
<script type="text/javascript">
function validate() {
if (document.getElementById('remember').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>

Try this:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
Your script doesn't know what the variable remember is. You need to get the element first using getElementById().

//HTML
<input type="checkbox" id="someID">
// JavaScript
const someCheckbox = document.getElementById('someID');
someCheckbox.addEventListener('change', e => {
if(e.target.checked === true) {
console.log("Checkbox is checked - boolean value: ", e.target.checked)
}
if(e.target.checked === false) {
console.log("Checkbox is not checked - boolean value: ", e.target.checked)
}
});
know more

This should allow you to check if element with id='remember' is 'checked'
if (document.getElementById('remember').is(':checked')

use like this
<script type=text/javascript>
function validate(){
if (document.getElementById('remember').checked){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />

If you are using this form for mobile app then you may use the required attribute html5.
you dont want to use any java script validation for this. It should work
<input id="remember" name="remember" type="checkbox" required="required" />

Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">button</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("Not checked.");
}
}
</script>

if (document.getElementById('remember').checked) {
alert("checked");
}
else {
alert("You didn't check it! Let me check it for you.");
}

This should work
function validate() {
if ($('#remeber').is(':checked')) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}

I am using this and it works for me with Jquery:
Jquery:
var checkbox = $('[name="remember"]');
if (checkbox.is(':checked'))
{
console.log('The checkbox is checked');
}else
{
console.log('The checkbox is not checked');
}
Is very simple, but work's.
Regards!

remember is undefined … and the checked property is a boolean not a number.
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}

You can use this simple and effective code using pure JS and jQuery.
using validate function as onclick attr
function validate(el) {
if (el.checked) {
alert("checked")
} else {
alert("unchecked")
}
}
<input id="remember" name="remember" type="checkbox" onclick="validate(this)" />
OR
using pure JS
document.addEventListener("DOMContentLoaded", function(event) {
//using pure Js code
let chk = document.getElementById("remember");
if (chk.checked) {
alert("checked")
}else{
alert("unchecked")
}
})
<input id="remember" name="remember" type="checkbox"/>
using jQuery
$(document).ready(function () {
//using jQuery code
$('#remember').on('change', function (e) {
if (e.currentTarget.checked) {
alert("checked")
} else {
alert("unchecked")
}
})
})
<input id="remember" name="remember" type="checkbox"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">
button
</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>

The remember variable is undefined. so try this way:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}

You can try this:
if ($('#remember').is(':checked')){
alert('checked');
}else{
alert('not checked')
}

Try This
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
if (input.checked) {
alert("checked");
} else {
alert("You didn't check it.");
}
}
input.onchange = check;
check();
}
</script>

You can also use JQuery methods to accomplish this:
<script type="text/javascript">
if ($('#remember')[0].checked)
{
alert("checked");
}
</script>

The below will definitely work. updated 2022
<input onchange="isChecked()" type="checkbox" required="required"/>
<script type="text/javascript">
let ischeckvariable = false;
function isChecked() {
if (!ischeckvariable) {
ischeckvariable = true;
} else {
isckeckvariable = false;
}
}
</script>