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

Ignore value radiobuttons - iCheck

I try this way for get a value from radiobuttons (iCheck), but all the time only return the value from the first radio, ignoring the remaining. The theory says that the code is fine, even so it returns badly.
Radio box, get the checked value [iCheck]
My code:
<div class="step row">
<div class="col-md-10">
<h3>YYYYYY.</h3>
<ul class="data-list-2">
<li><input name="p1" id="p1" type="radio" class="required check_radio" value="1"><label>Yes</label></li>
<li><input name="p1" id="p1" type="radio" class="required check_radio" value="0"><label>No</label></li>
<li><input name="p1" id="p1" type="radio" class="required check_radio" value="2"><label>Meybe</label></li>
</ul>
</div>
</div>
<!-- end step -->
My method for get value:
$(document).ready(function() {
$('#p1').on('ifChecked', function(event) { //try ifClicked - ifToggled
alert($(this).val()); // alert value
});
});
All the time return value 1 even when another option is selected.
Please help, I try all the night different ways but doesn't work ;(

I'm not sure how you are generating the ids for your radio buttons, but the id property should always be unique, since you want the same event handling on your radio buttons, just use the class so that it attaches the event to all your radio buttons which belong to that class, then you don't have to add events for each individual id:
So instead of this:
//If you did it this way, you'd have to have one of these blocks for each
//unique id belonging to a radio button
$('#p1').on('ifChecked', function(event){ //try ifClicked - ifToggled
alert($(this).val()); // alert value
});
Change it to this:
//Use the class instead so that the same event handling can be added to all radio
//buttons in one block of code
$('.required.check_radio').on('ifChecked', function(event){ //try ifClicked - ifToggled
alert($(this).val()); // alert value
});

Show hide text box from a dynamic element jQuery c#

Below is my code, I am trying to hide and show dynamic elements. The problem I am having is, I only want my hidden div to only show one at a time if only I check "Other". However, the code below will show the hidden div for all number of #dynamicRows I have. so it works for initial 1st #dynamicRow added, the problem is when I have two or more #dynamicRows
$('#dynamicRow').on('click', 'input[id^=race]', function () {
if ($(this).is(":checked")) {
if ($(this).val() == "Other") {
$(".cssclass").each(function (index) {
$(this).closest("div").show();
});
}
else {
$(".cssclass").each(function () {
$(this).closest("div").hide();
});
}
}
});
Below are dynamic rows, for help purposes i am showing the html code, however, it doesn't exist on the screen, a user will click "ADD" to generate the code below. I have no problem in generating dynamic row and it is not why I am posting. note the name in my radio button is generated by c# and everything works. Again the problem is not how to create a dynamic row, it is nicely taken care of in C#.
Dynamic row one works with the above jQuery:
<div id="dynamicRow">
<input type="radio" value="No" id="race[]" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" id="race[]" name="Person[hhhhhh].race"> Other:
<div id="iamhidden" class="cssclass">
I appear one at a time, when other radio button is checked
</div>
</div>
Dynamic row two doesn't work with the above jquery and it takes the above form events as its own, so if i check the radio button in row 2, the 1st dynamic row responds to that event and vice versa:
<div id="dynamicRow">
<input type="radio" value="No" id="race[]" name="Person[hhhhh].race"> No:
<input type="radio" value="Other" id="race[]" name="Person[hhhhh].race"> Other:
<div id="iamhidden" class="cssclass">
I appear one at a time, when other radio button is checked
</div>
</div>

Working Example
id should be unique in same document, replace the duplicate ones by a class :
<input type="radio" value="No" class="race" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" class="race" name="Person[hhhhhh].race"> Other:
Also add class and not id to the dynamic rows generated by your C# code :
<div class="dynamicRow">
Then in your js use this class :
$(".cssclass").hide();
$('.dynamicRow').on('click', '.race', function () {
if ($(this).val() == "Other") {
$(this).next(".cssclass").show();
} else {
$(this).nextAll(".cssclass").hide();
}
});
Hope this helps.

Try this:
$('body').on('click', '#dynamicRow', function () {
if ($(this).find('[value=Other]').is(":checked")) {
$(".cssclass").each(function (index) {
$(this).closest("div").show();
});
} else {
$(".cssclass").each(function () {
$(this).closest("div").hide();
});
}
});

He is a working example of what you wanted. I am generating the required with js only.
Few Points to mention
you add the event listener to the parent of the dynamic generated content.
Avoid use of IDs if they are not going to be unique and prefer classes and pseudo selectors if required
var counter = 0;
function addNewEntry(){
++counter;
var str = '<div class="dynamicRow"><input type="radio" value="No" id="race[]" name="Person[hh'+counter+'].race"> No:<input type="radio" value="Other" id="race[]" name="Person[hh'+counter+'].race"> Other:<div id="iamhidden" class="cssclass"> I appear one at a time, when other radio button is checked</div> </div>';
$('#dynamicRowContainer').append(str);
$("#dynamicRowContainer .dynamicRow:last-child .cssclass").hide()
}
$('#dynamicRowContainer').on('change', '.dynamicRow > input', function () {
if(this.value=="Other"){
$(this).siblings('.cssclass').show();
}else{
$(this).siblings('.cssclass').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addNewEntry()">Add New Entry</button>
<div id="dynamicRowContainer">
</div>

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

Checkboxs disabled with jquery not working as intended

i have some checkboxes that are displayed by doing a select in database that represents tables of a restaurant. Those tables that are already reserved i add them an disabled attribute. The problem with my script is that i only want to select three tables max and that means i need to add disabled atribute to the other to block them. and when i want to deselect those 3 already selected i need to remove the disabled attribute. Problem is that it removes the attribute from all tables even those that are reserved and selected from database.
Here is my script:
JSFIDDLE HERE
<script type="text/javascript">
var $checks = $(".table").change(function () {
if ($checks.filter(":checked").length<3)
{
$(".formular").toggle($checks.filter(":checked").length>0);
$checks.not(":checked").removeAttr("disabled");
}
else
{
$checks.not(":checked").attr("disabled", "disabled");
}
});
</script>

Added a class .ignore to the input disabled from start and in js binding change event only to checkboxes without the ignore class as mentioned by #lolka_bolka
HTML
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling"/>
<input type="checkbox" class="bowling"/>
JS
var $checks = $(".bowling:not(.ignore)").change(function () {
if ($checks.filter(":checked").length < 3) {
$(".formular").toggle($checks.filter(":checked").length > 0);
$checks.not(":checked").removeAttr("disabled");
} else {
$checks.not(":checked").attr("disabled", "disabled");
}
});
:not(foo){} will match anything that isn't foo, including html and
body. Source
Demo