Develop Reference

Check all "yes" checkboxes in Javascript

I am trying to implement a "yes to all" checkbox on my website.
This is a sample of part of the code I have so far.
$("input:checkbox").each(function () {
var pos = $(this).prop("id");
var arr = pos.split("_");
var arr2 = arr[1].split("C");
if (arr2[1] == undefined) {
var arr3 = arr[1].split("W");
$(this).addClass(arr3[0]);
}
else {
$(this).addClass(arr2[0]);
}
});
$(".P2").change(function () {
var a = $(".P2:checkbox:checked");
if (a.length = 1) {
$(".P3").prop("checked", true);
$(".P4").prop("checked", true);
$(".P5").prop("checked", true);
$(".P6").prop("checked", true);
$(".P7").prop("checked", true);
$(".P8").prop("checked", true);
$(".P9").prop("checked", true);
$(".P10").prop("checked", true);
$(".P11").prop("checked", true);
}
});
<asp:CheckBox ID="P2C1" runat="server" text=" Yes to All"/>
<asp:CheckBox ID="P3C1" runat="server" text=" Yes" />
<asp:CheckBox ID="P3C2" runat="server" text=" No" />
<asp:CheckBox ID="P4C1" runat="server" text=" Yes" />
<asp:CheckBox ID="P4C2" runat="server" text=" No" />
That is just a portion of the checkboxes it goes on in the same pattern. The first box is yes and the second no. I need to implement the P2 checkbox as a select yes to all and only have the javascript select the checkboxes with an ID of C1 at the end. Currently, when checked the select yes to all checks both yes(C1) and no(C2) boxes. I have tried to change the code to:
$(".P2").change(function () {
var a = $(".P2:checkbox:checked");
if (a.length = 1) {
$(".P3C1").prop("checked", true);
$(".P4C1").prop("checked", true);
But that does not work and it does not check any boxes.
I know it has to do with the top input function, but I am just not sure what to change. I don't want to mess with the top input function at all because other things rely on that to work as is.

I swapped out the JSP tags for native HTML tags. The example below should adhere to your algorithm.
The "Yes to All" should have a special class or ID.
$('.all').change(function() {
$('input[id$="_C1"]:not(.all)').prop('checked', $(this).is(':checked'));
$('input[id$="_C2"]:not(.all)').prop('checked', false);
});
$('input:not(.all)').change(function() {
var id = $(this).attr('id'),
parts = id.split(/_/),
group = parts[0];
$('input[id^="' + group + '"]:not(#' + id + ')').each(function() {
if ($(this).is(':checked')) {
$(this).prop('checked', false);
}
});
});
body { display: flex; flex-direction: column; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" id="P2_C1" class="all" />Yes to All</label>
<label><input type="checkbox" id="P3_C1" />Yes</label>
<label><input type="checkbox" id="P3_C2" />No</label>
<label><input type="checkbox" id="P4_C1" />Yes</label>
<label><input type="checkbox" id="P4_C2" />No</label>

Checkbox Check for yes command in javascript

I want to get done, When i try to checked checkbox, It will show popup. Then, there have a two option as "Yes" and "NO". When i click "yes" checkbox will checked and popup close. If i choose "NO" checkbox will unchecked and close popup.
Give me a help on this. Sample code here
Javascript
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
$("#txt").dialog({
close: function () {
$('#chkBox').prop('checked', false);
}
});
} else {
$("#txt").dialog('close');
}
});
});
HTML
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
<button>Yes</button>
<button>NO</button>
</div>
Live sample here :
http://jsfiddle.net/5vy1m233/37/
Please help. Thank you.

Try adding a buttons:{} object property instead of having two extra buttons in the markup. This setting will create buttons for you and in those buttons you can choose to check/uncheck the checkbox:
$(document).ready(function() {
$('#chkBox').click(function() {
var $chkBox = $('#chkBox'),
$txt = $('#txt');
$txt.dialog({
buttons: {
Yes: function() {
$chkBox.prop('checked', true); // check if Yes
$txt.dialog('close'); // and close the popup
},
No: function() {
$chkBox.prop('checked', false); // uncheck if No
$txt.dialog('close'); // and close the popup
}
}
});
});
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
</div>

<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" onClick="confirmation(this);"/>
function confirmation(obj) {
obj.checked ? confirm("You have chosen " + obj.value + " as your type \n If you have chosen the right type, Click Ok!") ? alert("You clicked ok") : obj.checked = false : "";
}

you just have to put id on those button and add function and run it with 'onlick'
html
<button onClick="btn_yes()">Yes</button>
<button onClick="btn_no()">NO</button>
js
function btn_yes(){
$("#txt").dialog('close');
document.getElementById("chkBox").checked = true;
}
function btn_no(obj){
$("#txt").dialog('close');
}
here jsfiddle
http://jsfiddle.net/5vy1m233/40/

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

checked radiobutton on checkbox change event

how we checked or unchecked all radiobutton on checkbox click.. if checkbox checked then all radiobutton also checked and vice versa.. it is not working properly
<input type="checkbox" id="Check" />SelectAll<br /><input type="radio"/>First<br />
<input type="radio"/>Second<br />
<input type="radio"/>Third<br />
<input type="radio"/>Fourth<br />
<input type="radio"/>Fifth</div>
<script>
var IsCheck = false;
$(document).ready(function () {
$("#Check").change(function () {
if (IsCheck == false) {
$("input[type=radio]").attr("checked", true);
IsCheck == true
}
else { $("input[type=radio]").attr("checked", false); IsCheck == false }
});
}); </script>

Take care you were just comparing operands instead of assigning to a variable in this statements:
IsCheck == true
^------ REMOVE ONE = so it's an assignment
Also, don't use .attr("checked", true); the correct form is:
$("input[type=radio]").attr("checked", 'checked'); //checking for jQuery < 1.6
And unchecking:
$("input[type=radio]").removeAttr("checked"); //unchecking for jQuery < 1.6
If you are using jQuery > 1.6 you can use the .prop() method with a boolean, which is similar to how you were trying to use it:
$("input[type=radio]").prop("checked", true); //checking for jQuery >= 1.6
$("input[type=radio]").prop("checked", false); //unchecking for jQuery >= 1.6

For jQuery 1.9 or higher use
$('input[type=radio]').prop("checked", true)
Otherwise try
$('input[type=radio]').attr('checked', 'checked');

Try this
$(document).ready(function () {
$("#Check").change(function () {
$("input[type=radio]").attr("checked", $("#Check").is(":checked"));
});
});
Demo

For your question, this could be the answer :
$("#Check").change(function () {
$("input:radio").prop("checked", this.checked);
});
Demo : http://jsfiddle.net/hungerpain/QSx29/
That said, radio buttons are not the best way of doing this. Its not semantically right. You can have only one radio button selected in a group. Try using checkboxes instead. Try to change you're markup to this :
<input type="checkbox" id="Check" />SelectAll
<br />
<input type="checkbox" />First
<br />
<input type="checkbox" />Second
<br />
<input type="checkbox" />Third
<br />
<input type="checkbox" />Fourth
<br />
<input type="checkbox" />Fifth</div>
And replace the JS code to this :
$("#Check").change(function () {
$("input:checkbox").prop("checked", this.checked);
});
Here's a demo : http://jsfiddle.net/hungerpain/QSx29/1/

You just need this
$("#Check").change(function () {
$("input[type=radio]").prop("checked", this.checked);
});
Demo ----> http://jsfiddle.net/kLnyD/

try this
http://jsfiddle.net/4u9sQ/
$("#Check").change(function () {
if ($(this).is(':checked')) {
$("input[type=radio]").prop("checked", true);
}
else { $("input[type=radio]").prop("checked", false); }
});

How to automatically uncheck a checkbox if another checkbox is checked through javascript?

I have a checkbox Birthdate which shows the mm/dd only.And below it there is another checkbox called ShowYear which shows the year and this checkbox is only visible if the Bithdate checkbox is checked.
Now I want to uncheck the ShowYear checkbox automatically if the Birthdate checkbox is
unchecked through javascript.

<input id="cbxBirthDate" type="checkbox" onClick="javascript:uncheckShowYear(this);" />
<input id="cbxShowYear" type="checkbox" />
<script language="javascript" type="text/javascript">
function uncheckShowYear(obj)
{
if (obj.checked == false)
{
document.getElementById("cbxShowYear").checked = false;
}
}
</script>

First, give your check boxes ids eg:
<input type="checkbox" id="birth" />
<input type="checkbox" id="year" />
Javascript:
<script type="text/javascript">
window.onload = function(){
var birth = document.getElementById('birth');
var year = document.getElementById('year');
if (birth.checked == false)
{
year.checked = false;
}
}
</script>

If you are using jquery than
$(document).ready( function a()
{
if ( $('#birth').is(':checked'))
{
$('#year').attr('checked', false);
}
});