Naming html optionfields and checkboxes to use it properly in jquery - javascript

I'm trying to get a value in array and then display it. This works well for the one I have
html:<input id="email" type="email" name="email" required="required" />
jquery:
$('#email').on('keyup', updateStatus);
person[0] = $('#email').val();
but when I do this with optionfields or checkboxes, this doesn't work: I always get the value female in the optionfields and the value 1 in the checkboxes. How do I have to name them to get it working?
<input type="radio" id="gender" name="gender" value="Male">Male</input>
<input type="radio" id="gender" name="gender" value="Female">Female</input>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="1" />1</label>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="2" />2</label>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="3" />3</label>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="4" />4</label>
And the jquery:
$('#gender').on('blur', updateStatus);
$('#chbx1').on('blur', updateStatus);
person[3] = $('#gender').val();
person[4] = $('#chbx1').val();
This is my updateStatus function:
function updateStatus() {
var person = [];
person[0] = $('#email').val();
person[1] = $('#passwort').val();
person[2] = $('#passwortwd').val();
person[3] = $('#gender').val();
person[4] = $('#chbx1').val();
person[5] = $('#hobby').val();
$('#status').text(JSON.stringify(person));
}

HTML ID should be unique. Several items cannot have the same ID.
Selection by ID (#...) will always return one item.
For example, check this snipper out:
document.write("By name:" + $("[name='gender']").length + "<br/>");
document.write("By ID:" + $("#gender").length + "<br/>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="gender" name="gender" value="Male"/>Male
<input type="radio" id="gender" name="gender" value="Female"/>Female
<br/><br/>
You should assign event to all elements with name sportart this way:
$("input[name='sportart']").on('change', function() {
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="sportart" value="1" />1<br/>
<input type="checkbox" name="sportart" value="2" />2<br/>
<input type="checkbox" name="sportart" value="3" />3<br/>
<input type="checkbox" name="sportart" value="4" />4
You can always get the selected radio or checkbox value using the :checked selector:
var arr = $("input[name='sportart']:checked"); // for checkbox it is array
alert(arr.length); // count of selected items
alert(arr[0].value); // value of the first one
$("input[name='gender']:checked").val();

Try using change handler and use name attribute selector:
$('input[name=gender], input[name=sportart]').on('change', updateStatus);
person[3] = $('input[name=gender]:checked').val();
person[4] = $('input[name=sportart]:checked').val();
Example:
var pushStatus = function() {
var o = {};
o.gender = $('input[name=gender]:checked').val();
o.sportart = $('input[name=sportart]:checked').map(function() {
return this.value;
}).get().join(',');
$('#status').html(JSON.stringify(o));
};
$(function() {
$('input[name=gender], input[name=sportart]').on('change', pushStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
<label>
<input type="checkbox" name="sportart" value="1" />1</label>
<label>
<input type="checkbox" name="sportart" value="2" />2</label>
<label>
<input type="checkbox" name="sportart" value="3" />3</label>
<label>
<input type="checkbox" name="sportart" value="4" />4</label>
<div id="status"></div>

Related

Radio button calculator with nested if Stateme

I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.
I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]").each(function() {
if ($(this).is(":checked")) {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * $('[name="gastronomy"]').attr("add-value")
).toString();
values.push($(this).val());
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
}
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>
When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.
I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.
You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]:checked").each(function() {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
);
values.push(cateringFunc.toString());
totalPrice += cateringFunc;
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

How to send values of selected check boxes as a concatenated string in a text input on-click to a action button

Let's assume I have an array of check boxes (not necessarily as a part of a form). In my case 2 rows with 16 check boxes per row.
Each has his unique ID, name and value.
I need An action button to send to a form a concatenated string of selected check boxes and also to another input the number of selected boxes (count of checked) This inputs are part of a form containing and other inputs.
This is my basic functionality diagram:
diagram of1
My question for you is how to achieve this in a stable and safe manner. JS, Jquery, other methods?
Thank you,
Here is my html/Jsquery work:
//Select interval with Shift
$(document).ready(function() {
var $chkboxes = $('.chkbox');
var lastChecked = null;
$chkboxes.click(function(e) {
if (!lastChecked) {
lastChecked = this;
return;
}
if (e.shiftKey) {
var start = $chkboxes.index(this);
var end = $chkboxes.index(lastChecked);
$chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
}
lastChecked = this;
});
});
//count checked
var form = document.getElementById('chart');
var checkBoxes = $(form).children('.chkbox');
var count = 0;
var divBoxesChecked = document.getElementById('boxesChecked');
divBoxesChecked.innerHTML = 0;
$(checkBoxes).on('change', function() {
$.each(checkBoxes, function(i) {
if (checkBoxes[i].checked) {
count++;
}
});
var qty = count;
var seld = $('.chkbox:checked').map(function() {
return this.value;
})
.get()
.join(",");
$("#transfercape").on('click', function() {
var pid = 125;
var price = 4;
$('#productprice').val(price);
$('#productID').val(pid);
$('#elements').val(qty);
$('#selectionprice').val(price * qty);
$('#teeth').val(seld);
});
$("#transferbonturi").on('click', function() {
var pid = 155;
var price = 40;
$('#productprice').val(price);
$('#productID').val(pid);
$('#elements').val(qty);
$('#selectionprice').val(price * qty);
$('#teeth').val(seld);
});
console.log(count);
//console.log($('input[class=chkbox]:checked').val(","));
divBoxesChecked.innerHTML = count + " elemente selectate ";
console.log(seld);
count = 0;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">
<h1>Chart</h1>
<input type="checkbox" class="chkbox" id="maxila18" name="maxila18" value="18">
<label for="maxila1"> 18</label>
<input type="checkbox" class="chkbox" id="maxila17" name="maxila17" value="17">
<label for="maxila17">17</label>
<input type="checkbox" class="chkbox" id="maxila16" name="maxila16" value="16">
<label for="maxila16">16</label>
<input type="checkbox" class="chkbox" id="maxila15" name="maxila15" value="15">
<label for="maxila15"> 15</label>
<input type="checkbox" class="chkbox" id="maxila14" name="maxila14" value="14">
<label for="maxila14"> 14</label>
<input type="checkbox" class="chkbox" id="maxila13" name="maxila13" value="13">
<label for="maxila13"> 13</label>
<input type="checkbox" class="chkbox" id="maxila12" name="maxila12" value="12">
<label for="maxila12"> 12</label>
<input type="checkbox" class="chkbox" id="maxila11" name="maxila11" value="11">
<label for="maxila11"> 11</label>
<input type="checkbox" class="chkbox" id="maxila21" name="maxila21" value="21">
<label for="maxila21"> 21</label>
<input type="checkbox" class="chkbox" id="maxila22" name="maxila22" value="22">
<label for="maxila22"> 22</label>
<input type="checkbox" class="chkbox" id="maxila23" name="maxila23" value="23">
<label for="maxila23"> 23</label>
<input type="checkbox" class="chkbox" id="maxila24" name="maxila24" value="24">
<label for="maxila24"> 24</label>
<input type="checkbox" class="chkbox" id="maxila25" name="maxila25" value="25">
<label for="maxila25"> 25</label>
<input type="checkbox" class="chkbox" id="maxila26" name="maxila26" value="26">
<label for="maxila26"> 26</label>
<input type="checkbox" class="chkbox" id="maxila27" name="maxila27" value="27">
<label for="maxila27"> 27</label>
<input type="checkbox" class="chkbox" id="maxila28" name="maxila28" value="28">
<label for="maxila28"> 28</label>
<br>
<input type="checkbox" class="chkbox" id="mandible38" name="mandible38" value="38">
<label for="mandible3"> 38</label>
<input type="checkbox" class="chkbox" id="mandible37" name="mandible37" value="37">
<label for="mandible37">37</label>
<input type="checkbox" class="chkbox" id="mandible36" name="mandible36" value="36">
<label for="mandible36">36</label>
<input type="checkbox" class="chkbox" id="mandible35" name="mandible35" value="35">
<label for="mandible35"> 35</label>
<input type="checkbox" class="chkbox" id="mandible34" name="mandible34" value="34">
<label for="mandible34"> 34</label>
<input type="checkbox" class="chkbox" id="mandible33" name="mandible33" value="33">
<label for="mandible33"> 33</label>
<input type="checkbox" class="chkbox" id="mandible32" name="mandible32" value="32">
<label for="mandible32"> 32</label>
<input type="checkbox" class="chkbox" id="mandible31" name="mandible31" value="31">
<label for="mandible31"> 31</label>
<input type="checkbox" class="chkbox" id="mandible41" name="mandible41" value="41">
<label for="mandible43"> 41</label>
<input type="checkbox" class="chkbox" id="mandible42" name="mandible42" value="42">
<label for="mandible42"> 42</label>
<input type="checkbox" class="chkbox" id="mandible43" name="mandible43" value="43">
<label for="mandible43"> 43</label>
<input type="checkbox" class="chkbox" id="mandible44" name="mandible44" value="44">
<label for="mandible44"> 44</label>
<input type="checkbox" class="chkbox" id="mandible45" name="mandible45" value="45">
<label for="mandible45"> 45</label>
<input type="checkbox" class="chkbox" id="mandible46" name="mandible46" value="46">
<label for="mandible46"> 46</label>
<input type="checkbox" class="chkbox" id="mandible47" name="mandible47" value="47">
<label for="mandible47"> 47</label>
<input type="checkbox" class="chkbox" id="mandible48" name="mandible48" value="48">
<label for="mandible48"> 48</label>
<br>
</div>
<div>
<h3> numar elemente selectate</h3>
<div id="boxesChecked"> </div>
</div>
<input type="button" value="ADD CAPE" id="transfercape">!Cape CrCo(4euro) </input>
<input type="button" value="ADD Bonturi" id="transferbonturi">!Bonturi(40euro) </input>
<div id="container1">
<form>
<input type="text" / id="elements" placeholder="elements">
<input type="text" / id="productID" placeholder="productID">
<input type="text" / id="productprice" placeholder="productprice">
<input type="text" / id="selectionprice" placeholder="selectionprice">
<input type="text" / id="teeth" name="teeth " placeholder="teeth" value="">
</form>
</div>
This solved practically main problem, still I can't figure how to replace join separator between consecutive selected boxes from comma to minus.
String returned by .map() function need to conditionally change separator for consecutively checked boxes.
Example:
Checked: 18 14 13 12 24
Now the result is: 18,14,13,12,24
but I need to be: 18,14-13-12,24
Please help!

Clearing a textbox field when a radio button is selected in Javascript

I have a web form which allows users to donate money using the predefined radio buttons with a value assigned to them (all different numbers). I also have a choose your own amount textfield which they can write in a custom amount they wish to donate. I want to clear the custom textfield if a user selects a predefined choice.
So far I have created this:
HTML:
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
JAVASCRIPT:
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('#theamount').removeProp("disabled");
}
else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val("");
}
});
But basing it on a value === true for value="" just doesn't seem right.
Is there a way to improve this?
Thanks
To disable/enable an element you need to set the value of the disabled property to true/false, removing the property doesn't work so you need
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('#theamount').prop('disabled', false);
} else {
$('#theamount').prop("disabled", true).val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment">
<label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled" />
Use removeAttr instead of removeProp and I have modified your code to accept amounts on textbox based on radio button selected
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
}
else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
Update
From your comments I hope you are expecting below functionality.
$('#theamount').on('focus', function() {
$("input:radio").prop("checked",false);
$("input[value='']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

using checkboxes for multiple instances

I have this script. Everything is working except I need to make it work with multi-able items. The first set of work perfectly, but I can seam to replicate it on the second and third set of check boxes.
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales" >Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2" >Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3" >Item 3</label>-->
<hr />
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Please can anyone help?
Many thanks in advance.
remove checkBoxes() method and replace the last event handlers as (check this fiddle)
//put the event handler directly on the checkboxes inside the section
$( "section input[type='checkbox']" ).on("change", function()
{
console.log( $( this ) );
//get the handle to the parent section
var $parentSection = $( this ).parent();
//compare the number of checked checkboxes with total one
if( $parentSection.find( "input[type='checkbox']:checked" ).length == $parentSection.find( "input[type=checkbox]" ).length )
{
$parentSection.prev().prev().prop("checked", true);
//write checkall's textbox id
$("#checked").append( "<h3>" + $parentSection.prev().prev().attr( "id" ) + "</h3>");
}
else
{
$parentSection.prev().prev().prop("checked", false);
//write each and every checked box's text
$parentSection.find("input[type='checkbox']:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});
Following code snippet should fulfill your requirements. Hope this will help you.
var checkedDiv = $("#checked");
$('input[type=checkbox]').on('change', function() {
if (this.className == 'checkall') {
var section = $(this).nextAll('section:first');
section.find('input[type=checkbox]').prop('checked', this.checked);
} else {
var parentSection = $(this).parent();
var checkall = parentSection.prevAll(".checkall:first")
var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length;
checkall.prop("checked", isEqual);
}
checkedDiv.html('');
$('.checkall').each(function() {
if (this.checked) {
checkedDiv.append('<h3>' + this.id + '</h3><br/>');
} else {
var section = $(this).nextAll('section:first');
section.find("input[type=checkbox]:checked").each(function() {
checkedDiv.append($(this).next().text() + "<br>");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked"></div>

Show/Hide div if all radios are checked

I have N groups of radios. I would like to show a div if all groups of radios are checked and if not all are checked, show another div:
http://jsfiddle.net/zoLwdqx6/
HTML
<p>
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Years
</p>
<br>
<p>
<input type="radio" name="year" value="1" />2015
<input type="radio" name="year" value="2" />2014
<input type="radio" name="year" value="3" />2013
</p>
<br>
<p>
<input type="radio" name="student" value="1" />Paul
<input type="radio" name="student" value="2" />Mary
<input type="radio" name="student" value="3" />Jane
</p>
<br>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>
Javascript
$('.yeschecked').hide();
$('input[type=radio]').click(function () {
$('.yeschecked').show();
});
Here is an example where 3 is not hardcoded:
$(function() {
$(".yeschecked").hide();
// count number of radio buttons grouped by name
var radioGroups = [];
$("input[type=radio]").each(function() {
if ($.inArray(this.name, radioGroups) >= 0) {
return;
}
radioGroups.push(this.name);
});
// radioGroups = ["period", "year", "student"]
$("input[type=radio]").on("change", function() {
var all = $("input[type=radio]:checked").length === radioGroups.length;
// using http://api.jquery.com/toggle/#toggle-display
$(".yeschecked").toggle(all);
$(".notchecked").toggle(all === false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
<input type="radio" name="period" value="1">1 Year
<input type="radio" name="period" value="2">2 Years
<input type="radio" name="period" value="3">3 Years
</p>
<p>
<input type="radio" name="year" value="1">2015
<input type="radio" name="year" value="2">2014
<input type="radio" name="year" value="3">2013
</p>
<p>
<input type="radio" name="student" value="1">Paul
<input type="radio" name="student" value="2">Mary
<input type="radio" name="student" value="3">Jane
</p>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>
You can get the checked radio button count if it is three then all categrories are selected
Live Demo
$('.yeschecked').hide();
$('input[type=radio]').change(function () {
if ($('input[type=radio]:checked').length == 3) {
$('.yeschecked').show();
$('.notchecked').hide();
} else {
$('.notchecked').show();
$('.yeschecked').hide();
}
});
This can be done by length
$(document).ready(function(){
var total = totalChecked = 0;
$('input[type=radio]').on("change",function(){
totalChecked = $('input[type=radio]:checked').length;
if( totalChecked == 3 ){
$('.yeschecked').show();
$('. notchecked').hide();
} else {
$('. notchecked').show();
$('.yeschecked').hide();
}
})
});
for length refer Here
Here is a fiddle to the example
As a group only one radio will be selected, so here only 3 radios will be checked.
var totl; // track total radio groups
$(function() {
var rdos = $('input[type=radio]');
rdos.on('change', toggleDivs);
var tmp = [], nm;
rdos.each(function() {
nm = this.name.toLowerCase();
if (-1 === $.inArray(nm, tmp)) //not found in array
tmp.push(nm); // new group
});
totl = tmp.length; // get count of radio groups
toggleDivs(); //page load trigger
});
var toggleDivs = function() {
var chkd = $('input[type=radio]:checked').length;
$('div.notchecked').toggle(chkd !== totl);
$('div.yeschecked').toggle(chkd === totl);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Years
</p>
<p>
<input type="radio" name="year" value="1" />2015
<input type="radio" name="year" value="2" />2014
<input type="radio" name="year" value="3" />2013
</p>
<p>
<input type="radio" name="student" value="1" />Paul
<input type="radio" name="student" value="2" />Mary
<input type="radio" name="Student" value="3" />Jane
</p>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>

Categories

Resources