Develop Reference

Radio button is showing div on selection but not hiding after selecting a different radio button

I have three divs I want to show based on a radio selection. I've written the below script, but the problem I've run into is the div doesn't hide after a different radio button is selected. I'm using ucalc so I can't change the class names or ids of the divs or the radio buttons so have to work with that.
Note, the radio button is automatically selected when the form loads so the first div needs to be showing initially.
Code below:
$(document).ready(function(){
// First Div/Radio Button
$('#input_radio-30-0-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
// Second Div/Radio Button
$("#grid-44-46").hide();
$('#input_radio-30-1-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
// Third Div/Radio Button
$("#grid-46-48").hide();
$('#input_radio-30-2-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-46-48").show();
} else {
$("#grid-46-48").hide();
}
});
});
I'm not very familiar with writing javascript (you can probably tell!) so an explanation for 'dummies' would be appreciated!
Thank you for your help!

You need to hide 2nd & 3rd div by CSS and when user change other button then find ID so according to ID show that div and rest div will hide as below snippet.
$(document).ready(function(){
$('#input_radio-30-0-des, #input_radio-30-1-des, #input_radio-30-2-des').on('change', function(){
var getid = $(this).attr('id');
if (getid=='input_radio-30-0-des') {
$('#grid-44-46, #grid-46-48').hide()//2nd and 3rd div hide
$("#grid-40-42").show();
}
if (getid=='input_radio-30-1-des') {
$('#grid-40-42, #grid-46-48').hide()//1st and 3rd div hide
$("#grid-44-46").show();
}
if (getid=='input_radio-30-2-des') {
$('#grid-40-42, #grid-44-46').hide()//1st and 2rd div hide
$("#grid-46-48").show();
}
})
});
#grid-44-46, #grid-46-48{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="div-show-hide" id="input_radio-30-0-des" checked> Button One</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-1-des"> Button Two</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-2-des"> Button Three</label>
<div id="grid-40-42"><h2>Show - Div One</h2></div>
<div id="grid-44-46"><h2>Show - Div Two</h2></div>
<div id="grid-46-48"><h2>Show - Div Three</h2></div>

Use wild card to hide all <div> which id start with grid- on radio change.
$("[id^=grid-]").hide();
$('#input_radio-30-0-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
$('#input_radio-30-1-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='input_radio-30-0-des' name="group1" />
<div id='grid-40-42'>grid-40-42</div>
<input type='radio' id='input_radio-30-1-des' name="group1" />
<div id='grid-44-46'>grid-40-46</div>
Note
No need multi-pal $(document).ready(function(){ .
Id must be unique.

I'm using a Javascript object to match each Radio button with it's targeted div.
I assume they are hidden by default. Just having fun and giving an alternative to multiple checks! A cleaner code also where you could easily setup all those confusing names...
$( document ).ready(function() {
let matches = {
"input_radio-30-0-des": 'grid-40-42',
"input_radio-30-1-des": 'grid-44-46',
"input_radio-30-2-des": 'grid-46-48'
};
$(":input[name='FM']").on("change", function () {
var target= matches[$(this).attr('id')];
$('#' +target).toggle($(this).checked);
$("[id^=grid-]").not('#' +target).hide();
})
});
div[id*='grid-'] { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="FM" id="input_radio-30-0-des" value="0"/>
<label for="input_radio-30-0-des">0</label>
<input type="radio" name="FM" id="input_radio-30-1-des" value="1"/>
<label for="input_radio-30-1-des">1</label>
<input type="radio" name="FM" id="input_radio-30-2-des" value="2"/>
<label for="input_radio-30-2-des">2</label>
<div id="grid-40-42">40-42</div>
<div id="grid-44-46">44-46</div>
<div id="grid-46-48">46-48</div>

Checkbox Hidden Div Unchecked

I have a checkbox hidden div with text field. If checkbox is checked this text field will showed, but if checkbox unchecked text field not show. This Code :
<script type="text/javascript">
$(function () {
$("input[name='checkbox1']").click(function () {
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
$("#dvcheckbox1").hide('lainnya');
}
});
});
</script>
<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1" style="display: none;">
<?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>
But, How this checkbox is checked if there something value on textfield? and text field shown. Because in form Update, value was show but checkbox is checked. I want checkbox is checked
For example Like this:
Click to show example

Instead use with change event with .toggle(boolean) method:
// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
var $v = $(this).find('input').val();
$("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
return $v.trim().length !== 0;
});
$("input[name='checkbox1']").change(function () {
$("#dvcheckbox1").toggle(this.checked);
});

There are a few things here:
1 - Better if you use document ready, because it waits until all the elements are loaded.
2 - You should hide the element$("#dvcheckbox1").hide('lainnya') when the page is loaded.
3 - A listener in the input:text is a good idea. It enables the checkbox if the textbox is empty.
Please, have a look at the next piece of code:
<div>
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1">
<label for="myValuye"/>
<input type="text" id="myValue" name="myValue" value=""/>
</div>
</div>
<script>
$(document).ready(function() {
$("input[name='checkbox1']").click(function () {
// Always use some logs to check what line are you reaching.
console.log("Clicked checkbox!!!");
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
console.log("Value: " + $("#myValue").val());
$("#dvcheckbox1").hide("lainnya");
}
});
$("#myValue").bind("change paste keyup", function() {
if ($(this).val() == "") {
$("#checkyes1").removeAttr("disabled");
} else {
$("#checkyes1").attr("disabled", true);
}
});
// First of all we hide the #dvcheckbox1
$("#dvcheckbox1").hide('lainnya');
})

Checkbox check first time not working, after second time, it is OK

I am trying to create a checkbox with label. When user click the label, it will check if checkbox checked. The first time, I click the label, the box is checked, but no alert action. After I click the second time, it start to function, alert action happen. What did I do wrong. I have tried to use individual ID. Click not working either.
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name).click(function(){
if ($('#'+id_name +'_checkbox').prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

<script type="text/javascript">
$('label').click(function() {
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Also be sure, you have included jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
And in new version of jQuery you can use insted of this:
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
This piece of code:
// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
alert('Unchecked');
}
else {
alert('Checked');
}
Workind DEMO here in jsFiddle

Simplify things, you don't need each loop:
$('label').click(function() {
name=this.id;
if ($('#'+name+'_checkbox').prop('checked')) {
alert('Checked');
}
else{
alert('unchecked');
}
});
Demo: http://jsfiddle.net/fqvajvo1/2/
Script running correctly, script checks prop, but on label click -> checkbox is really unchecked, property changing comes later.
So, maybe in your case reverse logic could help (if you need alerts at all):
http://jsfiddle.net/fqvajvo1/4/ :)

I always use .is(':checked').I find it way more reliable
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+id_name +'_checkbox').change(function(){
if ($(this).is(':checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>

your click id is not complete name,so add complete name and call $(this) property will be ok...
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name+'_checkbox').click(function(){
if ($(this).prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

Use .on to work for all events and all clicks on jQuery
Mainly used for dynamic creating elements
$(document).on('click','selector',function(){
});
Use class names for best options for grouped elements

javascript get the value of checkbox if checked without button clicked

javascript get the value of checkbox if checked without button clicked
I am struck in the middle of project, please help..
how to get the check box value from the class name or from by name or by id through alert so that the particular value I can pass...
I am sorry to ask..I am new the jquery and javascript..
This is my HTML ...
<input type="checkbox" name='cbox' value="red" class="theClass"/>red
<input type="checkbox" name='cbox' value="green" class="theClass"/>green
<input type="checkbox" name='cbox' value="yer" class="theClass"/>yer
<input type="checkbox" name='cbox' value="asdasd" class="theClass"/>asdasd
<input type="checkbox" name='cbox' value="radgdfged" class="theClass"/>radgdfged
$(function(){
$('input[type=checkbox]').on('change', function() {
alert($(this).val());
console.log($(this).val());
});
});
I googled much ...but every where onclick the button than only will get all checkbox values..
I am getting the values using the onclick button ....but the thing is getting the value without using the button...
My concern is getting the value if checkbox is checked..
eg: if i checked red , i should get alert 'red'.....

jQuery:
$('input[type=checkbox]').on('change', function() {
console.log($(this).val());
});
Javascript:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
console.log(this.value);
});
}
EDIT:
If you want the value only if the checkbox is checked.
jQuery:
$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked'))
console.log($(this).val());
});
Javascript:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if(this.checked)
console.log(this.value);
});
}
jsfiddle DEMO
P.s. for jQyery put your code inside:
$(function() {
//code here
});

If you need to get all the checked checkboxes on change of checkboes, you can use:
$('.theClass').change(function(){
alert($('.theClass:checked').map(function(){return this.value}).get())
});
Working Demo

try:
<input type="checkbox" name='cbox' value="red" class="theClass" onchange="alert(this.value)"/>red
demo
EDIT:
<input type="checkbox" name='cbox' value="red" class="theClass" onchange="this.checked?alert(this.value):null"/>red
demo
EDIT
alert all checked input values:
$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked')){
var values = [];
$.each($('input:checked'),function(index,input){
values.push(input.value);
});
alert(values.join(','));
}
});
demo

HTML
<input type="checkbox" name='cbox' value="red" class="theClass" checked/>
jQuery
$(function() {
$(":checkbox").each(function() {
alert($(this).val())
});
});

Javascript get the value of checkbox if checked without button clicked
This code is working fine.Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=checkbox]").change( function() {
var values = [];
$.each($('input:checked'),function(index,input){
values.push(input.value);
});
alert(values.join(','));
var n = $( "input:checked" ).length;
alert(n);
});
});
</script>
</head>
<body>
<form id="booking_form">
<input type="checkbox" name="bType" id="bType" value="A,200"> Type A - USD200<br>
<input type="checkbox" name="bType" id="bType" value="B,150"> Type B - USD150<br>
<input type="checkbox" name="bType" id="bType" value="C,100"> Type C - USD100<br>
<input type="checkbox" name="bType" id="bType" value="D,50"> Type D - USD50<br>
</form>
</body>
</html>
Preeti Dua

Select/Deselect All dynamic checkboxes in Rails 4 with Javascript

I have followed this StackOverflow Question's Answer1 and Answer2
but not getting result.. As I am calling all checkbox list's data from Range tabel. and their id is also defined by data.. Let me show you the code for this screenshot
= f.collection_check_boxes :range_ids, Range.active, :id, :name, {},:class=>'checkbox'
which returns as
<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">
I want if All means id="campaign_range_ids_4" is selected/deselected then all other check-boxes should be perform accordingly..
Here also have a screenshot of Range Table
I had tried this Javascript
:javascript
$('#campaign_range_ids_4').click(function() {
if(this.checked) {
$('#campaign_range_ids_1').checked = true;
$('#campaign_range_ids_2').checked = true;
$('#campaign_range_ids_3').checked = true;
});
} else {
$('#campaign_range_ids_1').checked = false;
$('#campaign_range_ids_2').checked = false;
$('#campaign_range_ids_3').checked = false;
});
}
});
Please correct me where I do Mistake.... Thanks in advance.. :)
Updated Question
I have followed Shridhar's and Pavan's answer it works perfectly but now I want that when I select All then deselect any one then it must uncheck "All" (4th checkbox) but it remains as it is..

As i said,it should be $('#campaign_range_ids_4') not $('#campaign_beacon_range_ids_4')
This will work too
$('#campaign_range_ids_4').click(function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
Demo

Error in Selectors ,It should be $('#campaign_range_ids_4') not $('#campaign_beacon_range_ids_4') use prop() to set the checkbox state
Try this
$('#campaign_range_ids_4').click(function () {
if ($(this).is(':checked')) {
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);
} else {
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
}
});
DEMO
OR
$('#campaign_range_ids_4').click(function () {
$('#campaign_range_ids_1, #campaign_range_ids_2, #campaign_range_ids_3').prop('checked', $(this).is(':checked'));
});
DEMO

change the selector to $('#campaign_range_ids_4')and do this:
$('#campaign_range_ids_4').change(function() {
$('#campaign_range_ids_1, #campaign_range_ids_2, #campaign_range_ids_3').prop('checked', this.checked);
});
instead of click use change method.

Modifying Sridhar's answer finally I got the Answer of my Updated Question's.
I wanted if All(4th checkbox) is checked then all check-box should be selected and if it's unchecked then all check-box should be unchecked it works perfectly
But Issue I had found that If All(4th checkbox) is selected then it check all boxes then if I unchecked any check-box then All(4th checkbox) must be uncheked which was not occur.
Solution by Modifying Code: In future if other people face the same issue..
HTML Code:
<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">London
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">India
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">USA
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">All
JavaScript:
$('#campaign_range_ids_4').click(function () {
if ($(this).is(':checked')) {
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);
} else {
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
}
});
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').click(function () {
if ($(this).is(':checked')) {
} else {
$('#campaign_range_ids_4').prop('checked', false);
}
});
Working Demo: