Develop Reference

Display value from only checked checkbox and if other checkboxes are checked uncheck them

Lets say that I have 3 checkboxes:
<input type="checkbox" value="25,99" name="price">
<input type="checkbox" value="15,99" name="price">
<input type="checkbox" value="10,99" name="price">
and I want to display the value of the checked checkbox in a div, but only one checkbox can be active at a time.
I was trying to marry these two examples together but this seams kinda messy and overkill:
only one checked at the time
http://jsfiddle.net/MQM8k/
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
with this link to live
$(document).ready(function() {
$("button").click(function(){
var favorite = [];
$.each($("input[name='sport']:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite sports are: " + favorite.join(", "));
});
});
Thanks

An easy way is to uncheck all the checkboxes as the first thing you do upon detecting a click, and then re-check the one you are on.
$('.prx').click(function(){
$('.prx').prop('checked', false);
$(this).prop('checked', true);
let prx = $(this).val();
$('#msg').text(prx);
});
#msg{margin-top:20px;padding: 10px; background:wheat;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
25.99 <input type="checkbox" class="prx" value="25,99" name="price"><br>
15.99 <input type="checkbox" class="prx" value="15,99" name="price"><br>
10.99 <input type="checkbox" class="prx" value="10,99" name="price"><br>
<div id="msg"></div>

$(document).on("click", ".prx", function (){
var self = $(this);
$('.prx').not(self).prop('checked', false);
self.prop('checked', true);
alert(self.val());
});

You should really consider making this input a radio button.
You're essentially breaking the UX of checkboxes to not allow multiple selections. Radio button inputs do this behavior (one selection at a time) by default, will have expected tab actions for accessibility users and won't need all this extra JS.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Buttons to select checkboxes by name

I have the following checkboxes in an HTML form.
<ul id="selection">
<span><label>First<br><input type="checkbox" name="First"></label></span>
<span><label>Second<br><input type="checkbox" name="Second"></label></span>
<span><label>Third<br><input type="checkbox" name="Third"></label></span>
<span><label>Fourth<br><input type="checkbox" name="Fourth"></label></span>
<span><label>Fifth<br><input type="checkbox" name="Fifth"></label></span>
</ul>
I'm trying to create two buttons. One that would select the first two and one that would select all of them.
I managed to select all of them with one button using this:
<input type="button" class="check btn" onClick="select(this)" value="Select All"/>
<script>
$('.check:button').click(function(){
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'Select' )
$(this).data('checked', checked);
});
</script>
But I can't seem to get the two buttons working.
My JavaScript knowledge is pretty limited and been searching for days, unsuccessfully for a solution that works.
Can please someone help? a detailed explanation would be awesome.

Try this:
$("#selectall").click(function() {
$("input[type='checkbox']").prop('checked', true);
});
$("#selecttwo").click(function() {
$("input[name='First'], input[name='Second']").prop('checked', true);
});
$("#resetall").click(function() {
$("input[type='checkbox']").prop('checked', false);
});
DEMO

Are you looking for this, https://jsfiddle.net/wx38rz5L/1261/ ( sorry about css :P ) or https://jsfiddle.net/wx38rz5L/1262/
Reference: https://api.jquery.com/attribute-equals-selector/
$('input[name=First]').prop('checked',true);
$('input[name=Second]').prop('checked',true);
//$('input[name=First],input[name=Second]').prop('checked',true); in one line

Automatically checking / unchecking parent inputs

I'm hoping someone can help me out here.
I'm trying to automatically check parent items in an input list, but also uncheck children if the parent is unchecked.
The great thing is I found some code that replicates the desired functionality perfectly: http://jsfiddle.net/3y3Pb/14/
EDIT: To clarify - the functionality required is this: Check mark a child input & all of the parent items get checked. Uncheck a Parent - all child inputs get unchecked. See the above example.
However, this doesn't seem to be working with my particular code (it's output from a WordPress plugin - Advanced Custom Fields) so I don't want to modify it).
I've narrowed it down to what I BELIEVE is the problem. ACF wraps each input with a <label></label>. I don't know why, but this breaks the functionality:
http://jsfiddle.net/3y3Pb/223/
When I remove the <label></label> it works fine:
http://jsfiddle.net/3y3Pb/225/
Changing the markup isn't really an option here, I would REALLY appreciate it if someone could assist me in making this work!

This should work, its simple and only uses divs and a few lines of jquery:
$('[type="checkbox"]').change(function () {
var kids = $(this).next().next();
if (kids.is('div') && !$(this).prop('checked'))
{
kids.children().each(function(){$(this).prop('checked',false)});
}
var thisChecked = $(this).prop('checked');
var master = $(this).parent().prevAll('[type="checkbox"]:first');
master.prop('checked', thisChecked ? true : master.prop('checked'));
});
div {
margin-left: 25px;
}
div div {
margin-left: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />Master Check
<br />
<div>
<input type="checkbox" />Slave Check 1
<br />
<input type="checkbox" />Slave Check 2
<br />
<input type="checkbox" />Slave Check 3
<br />
<div>
<input type="checkbox" />Slave 2 Check 1
<br />
<input type="checkbox" />Slave 2 Check 2
<br />
<input type="checkbox" />Slave 2 Check 3</div>
</div>

I have improved the javascript code.
$(document).ready(function() {
$('input[type=checkbox]').click(function(){
// if is checked
if($(this).is(':checked')){
$(this).parents('ul').children('li').children('label').find('input').prop('checked', true);
} else {
// uncheck all children
$(this).closest('li').find('input').prop('checked', false);
}
});
});
Children travels a single level down the DOM tree, whereas find goes for multiple levels down looking into descendants.

It was the label - here is the solution:
$('input[type=checkbox]').click(function(){
// if is checked
if($(this).is(':checked')){
$(this).parents('li').children('label').find('input[type=checkbox]').prop('checked', true);
} else {
// uncheck all children
$(this).closest('li').find('input[type=checkbox]').prop('checked', false);
}
});

Javascript/jQuery: search within object

I have the following code.
<div class="days">
<input name="days-select" type="radio" value="Mon" > Mon </input>
<br>
<input name="days-select" type="radio" value="Tue" > Tue </input>
</div>
<script>
$(document).ready(function() {
radiobtn = $('.days');
radiobtn.find('value="Tue"').prop('checked', 'checked');
});
</script>
Basically, I need a two-stage search. First, find the group of radio buttons, then set one of them as checked. HOWEVER, I do not want to combine these two steps into one. Thanks for the hint.
BTW, since I am new to Javascript I would like to ask how to debug this code. For example, single-step through the script, and after "radiobtn = $('.days');" check whether "radiobtn" is assigned correctly etc. Thanks again.

HTML
<div class="days">
<input id="dayMonday" name="days-select" type="radio" value="Mon">
<label for="dayMonday">Monday</label>
<br>
<input id="dayTuesday" name="days-select" type="radio" value="Tue">
<label for="dayTuesday">Tuesday</label>
</div>
script
$(document).ready(function () {
//your .days selector is actually getting the div and not the radio button
var div = $('.days');
//maybe here you want to do some things with the div...
//...
var radiobtn = div.find('input[value="Tue"]');
//maybe here you want to do some things with the radio button...
//...
//now you have the correct element...
radiobtn.prop('checked', true);
//F12 in Chrome to see the console
console.log(radiobtn);
//notice the selector property returns: .days input[value="Tue"]
console.log(radiobtn.selector);
//so you could just do this all in one line:
$('.days input[value="Tue"]').prop('checked', true);
//see last commented line regarding this next line...
//$('.days input[value="Tue"]').click(
// function(){ console.log("you clicked Tuesday");});
//Note: you could do this:
//radiobtn.click();
//... or this:
//$('.days input[value="Tue"]').click();
//but it also fires the click event which is why you would see
//"you clicked Tuesday" in the console with the above line uncommented
});
Here's a fiddle.

How to output the value of my radio button when click

I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.

Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.

With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());

Try this
$('.hover-star').click(function () {
alert($(this).val());
}

Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());

Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/