Develop Reference

How to show-hide the button based on if the closest radio button is selected?

Suppose,I have two quiz questions.Each question have radio buttons for selecting the answer and a clear answer button to clear the answer.
The clear button hide/show only when the answer is selected/deselected in its respective question block.
How do I find if the radio button selected/deselected is of its nearest question block and show/hide clear button accordingly ?
And,Here is the JS code I am currently using
jQuery(function($) {
if ($("input[type]").is(":radio")) {
$(".answer").append("<button type='button' name='clear' >Clear</button>");
}
if ($("input[type=radio]:checked").length > 0) {
$('button[name=clear]').show();
}
else{
$('button[name=clear]').hide();
}
$("input[type=radio]").on('click', function() {
$nearest= $(this).closest('.answer').find('button[name=clear]');
$nearest.show();
});
$('button[name=clear]').on('click', function() {
$(this).closest('.answer').find(':radio').prop('checked', false);
$(this).hide();
});
if ($('.content').parent().hasClass("deferredfeedback")) {
if ($('.answer .r0 input').prop('disabled')) {
$("button[name=clear]").remove();
}
} else {
if (!($('div.im-controls').length)) {
$("button[name=clear]").remove();
}
}
});
somewhere I am missing out something which I am not able to find out,can someone guide me on this ?

Try below code
Js Code here
jQuery(function($) {
$("button").hide();
$("input[type='radio']:checked").each(function(e){
$(this).closest('.answers').find("button").show();
});
$("body").on("change","input[type='radio']" ,function(){
$(this).closest('.answers').find("button").show();
});
$("body").on("click","button" ,function(){
$(this).closest('.answers').find("input[type='radio']:checked").prop("checked",false);
$(this).hide();
});
})
click here to show jsFiddle demo

Why not have the clear button there and hide it
CSS
.clearButton { display:none}
jQuery - assuming container per answer has class "answer" and
clear button has class "clearButton ":
$(function() {
$(".answer").on("click","input[type=radio]",function() {
$(this).closest(".answer").find(".clearButton").show();
});
});
or if siblings:
$(function() {
$(".answer").on("click","input[type=radio]",function() {
$(this).siblings(".clearButton").show();
});
});
For the clear you can use
$(".answer").on("click",".clearButton",function() {
$(this).siblings("input[type=radio]").prop("checked",false);
$(this).hide();
});
To show the clear button onload if some radios are already checked:
$("[type=radio]:checked").trigger("click")
$(function() {
$(".answer").on("click", "input[type=radio]", function() {
$(this).closest(".answer").find(".clearButton").show();
});
$(".answer").on("click", ".clearButton", function() {
$(this).siblings("input[type=radio]").prop("checked", false);
$(this).hide();
});
$("[type=radio]:checked").trigger("click")
});
.clearButton {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer">
<label><input type="radio" name="answer1" value="1">Answer 1</label>
<label><input type="radio" name="answer1" value="2">Answer 2</label>
<label><input type="radio" name="answer1" value="3">Answer 3</label>
<button type="button" class="clearButton">Clear</button>
</div>
<hr/>
<div class="answer">
<label><input type="radio" name="answer2" value="1">Answer 1</label>
<label><input type="radio" name="answer2" value="2" checked>Answer 2</label>
<label><input type="radio" name="answer2" value="3">Answer 3</label>
<button type="button" class="clearButton">Clear</button>
</div>

select checkbox with enter key

I have a few checkboxes that I need to be selected with the enter key instead of the space bar when it has focus. I have the code below that works for one check box, but I need multiple checkboxes. I know the id tag needs to be unique, but I'm not sure how to do it.
$(document).ready(function () {
$('#mycheckbox').on('keypress', function (event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">My text<br>
I'm trying to get this to work on all the checkboxes not just the one with the mycheckbox id.
Here's my full code so far:
`
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input:checkbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
}
});
});
</script>
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></
script>
<textarea class="textfield" id="form1" name="form1">My text
here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>
<script type="text/javascript">
function updateTextArea() {
var allVals = $('#form1').data('initialVal'),
lineCount = 1;
$('.taglist :checked').each(function(i) {
allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val
();
lineCount++;
});
$('#form1').val(allVals).attr('rows', lineCount);
}
$(function() {
$('.taglist input').click(updateTextArea);
$('#form1').data('initialVal', $('#form1').val());
updateTextArea();
});
</script>
</body>
</html>
`

Sounds like you are trying to get this to work on all checkboxes? In that case use $( ":checkbox" ) instead of $('#mycheckbox')

You can use input[type="checkbox"] or add a class to every checkbox and yes ids must be unique:
$(document).ready(function() {
$('input[type="checkbox"]').on('keypress', function(event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox1">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox2">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox3">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox4">My text

Changing the selector should do the trick:
$('input[type=checkbox]')
This will return all inputs of type checkbox. Another approach is to give all the checkboxes you are interested in a class, and then match the class - I suggested this approach as well, in case you don't want to apply it to all of them. So the HTML:
<input type="checkbox" class="support-enter" />
Then the jquery selector:
$('.support-enter')

Or you can use class selector instead of id selector. Just add some class to your checkbox.

Use attribute-equal selector to get the inputs of type checkbox like this:
$(document).ready(function() {
$('input[type = "checkbox"]').on('keypress', function(event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike">My text<br>
<input type="checkbox" name="Colors" value="Bike">Other text<br>

You have to use classes instead.
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
Jquery
$('.mycheckbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
}
});
Another method is to use a type selector in order to get the input elements with certain type.
$('input[type=checkbox]')
$(':checkbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
$('textarea').html($(this).prop('checked').toString());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
<textarea></textarea>

$(document).on('keypress', function(event) {
if (event.keyCode == 13) {
$('#mycheckbox').prop('checked', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">

How to uncheck a checkbox even if one among the list is unchecked?

I am trying a check a checkbox (which checks all other checkboxes in the list and unchecks even if one among the list is unchecked. Now only the first I mean one checkbox checking all the remaining checkboxes in the list is happening but the vice versa I mean unchecking even if one among the list in unchecked is not working. How can i achieve that?
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>
Fiddle.

I would do it this way:
$('.selectall').on('change', function(e) {
var $inputs = $('#checkboxlist input[type=checkbox]');
if(e.originalEvent === undefined) {
var allChecked = true;
$inputs.each(function(){
allChecked = allChecked && this.checked;
});
this.checked = allChecked;
} else {
$inputs.prop('checked', this.checked);
}
});
$('#checkboxlist input[type=checkbox]').on('change', function(){
$('.selectall').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>
EDIT: swapped e.isTrigger for e.originalEvent === undefined per A. Wolff's suggestion as commented below.

You can do it like below. Add another click event for checkbox under #checkboxlist, if a checkbox is unchecked then uncheck .selectall.
$('#checkboxlist input[type=checkbox]').click(function(){
if (!$(this).is(':checked')) {
$('.selectall').prop('checked', false);
}
});
DEMO

Check out this Demo.. with validation
<input type="checkbox" id="anchor-from"/>main
<input type="checkbox" class="checkall" id="period-daily" disabled />CheckBox2
<input type="checkbox" class="checkall" id="period-weekly"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly2"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly3"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly4"disabled />CheckBox3
Js
$("#anchor-from").change(function(){
if($('#anchor-from').is(':checked'))
{
$(".checkall").attr("disabled", false);
$(".checkall").prop("checked", true);
}
else
{
$(".checkall").attr("disabled", true);
$(".checkall").prop("checked", false);
}
});
$(".checkall").change(function(){
if($('.checkall').not(':checked'))
{
$(".checkall").attr("disabled", true);
$(".checkall").prop("checked", false);
$("#anchor-from").prop("checked", false);
}
});

$(document).ready(function () {
$('input[name=sample]').click(function() {
if ($(this).hasClass('selectall')) {
if ($(this).prop('checked') == true) {
$('#checkboxlist input[name=sample]').prop('checked', true);
}
else {
$('#checkboxlist input[name=sample]').prop('checked', false);
}
}
else {
if ($('#checkboxlist input[name=sample]:checked').length == $('#checkboxlist input[name=sample]').length) {
$('.selectall').prop('checked', true)
}
else {
$('.selectall').prop('checked', false)
}
}
});
});

How to use jQuery for listening if checkbox is changed not by clicking?

I have a number of checkboxes that change state(checked ,not checked) using another jQuery statement:
Elements:
<input type="checkbox" id="select_a">select group A</input>
<input type="checkbox" id="select_b">select group B</input>
<input type="checkbox" id="mix">select mix</input>
<div id="group_a">
<input type="checkbox" id="a_1">group A_1</input>
<input type="checkbox" id="a_2">group A_2</input>
</div>
<div id="group_b">
<input type="checkbox" id="b_1">group B_1</input>
<input type="checkbox" id="b_2">group B_2</input>
</div>
JQUERY
jQuery("#select_a").click(function () {
if (this.checked) jQuery("div#group_a input:checkbox").prop("checked", true);
else jQuery("div#group_a input:checkbox").prop("checked", false);
});
jQuery("#select_b").click(function () {
if (this.checked) jQuery("div#group_b input:checkbox").prop("checked", true);
else jQuery("div#group_b input:checkbox").prop("checked", false);
});
jQuery("#mix").click(function () {
if (this.checked) {
jQuery("#a_1").prop("checked", true);
jQuery("#b_1").prop("checked", true);
} else {
jQuery("#a_1").prop("checked", false);
jQuery("#b_1").prop("checked", false);
}
});
I need a way to set a listener to each checkbox in the groups, I used this way which works like this:
jQuery("div input:checkbox").click(function(e){
alert(e.target.id);
});
but this only works if the checkbox was clicked by the mouse, I would like a way to fire an event(set a listener) for each checkbox if it was checked by something other than the mouse.
Demo

You can use change() event handler
jQuery("div input:checkbox").change(function(){
alert(this.id);
});

Try change event, also for the top controls use radio instead of checkbox as any one would be checked:
$(function() {
var grp1 = $('#group_a').find('input[type=checkbox]');
var grp2 = $('#group_b').find('input[type=checkbox]');
$('input[name=grp]').on('change', function(e) {
var id = this.id;
grp1.prop('checked', 'select_a' === id);
grp2.prop('checked', 'select_b' === id);
if ('mix' === id) {
grp1.eq(0).prop('checked', true);
grp2.eq(0).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- use radio with name -->
<input type="radio" name="grp" id="select_a" />select group A
<input type="radio" name="grp" id="select_b" />select group B
<input type="radio" name="grp" id="mix" />select mix
<div id="group_a">
<input type="checkbox" id="a_1" />group A_1
<input type="checkbox" id="a_2" />group A_2
</div>
<div id="group_b">
<input type="checkbox" id="b_1" />group B_1
<input type="checkbox" id="b_2" />group B_2
</div>

Check all other checkboxes when one is checked

I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).
I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
Could you tell me some simple approach how to get it work? Thanks a lot!

demo
updated_demo
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});

HTML:
<form>
<label>
<input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>
JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/

Thanks to #Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.
FIDDLE
HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
SCRIPT
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
And now add this to manage the master checkbox as well...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});

Add extra script according to your checkbox group:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
HTML Code:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>

use this i hope to help you i know that this is a late answer but if any one come here again
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
Master CheckBox:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
Child CheckBox:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="#employee.Id" />```

You can use jQuery like so:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
A fiddle.

var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
In HTML:
Master Check box <input type="checkbox" onClick="toggle(this);">
Other Check boxes <input type="checkbox" name="ALL">

You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});

I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.
Here is the basic idea
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
if there are other elements that are siblings, than you would beed to filter the siblings
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
jsFiddle