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>
Related
I have a string which is a sequence of combinations like this: "AB BCD C AD ABCD...".
A, B, C and D are the factors, let's say 2, 3, 4 and 5.
I need to calculate the value total, which is a product of initial value (10 or 20 in the html example below) and these factors.
The combination of factors should be selected by user via checking the corresponding boxes, but the combination they select should be contained in the string above. If not, the user should have an option to select the allowed combination from the drop-down menu. The latter action should check the corresponding boxes automatically and thus calculate the needed value of total.
I need this repeated many times in the form and I got stuck at the stage of reading different initial values of total from the html attribute "value". Current version ignores that since I set total = 10 in jQuery.
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section"),
total = 10;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="20" class="result"></label>
</div>
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<!-- select box with available combinations (can be baked through JS) -->
<select style="display:none" class='helperBox'>
<option val=''>Available Combos</option>
<option val='AB'>AB</option>
<option val='BCD'>BCD</option>
<option val='C'>C</option>
<option val='AD'>AD</option>
<option val='ABCD'>ABCD</option>
</select>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<select style="display:none" class='helperBox'>
<option val=''>Available Combos</option>
<option val='AB'>AB</option>
<option val='BCD'>BCD</option>
<option val='C'>C</option>
<option val='AD'>AD</option>
<option val='ABCD'>ABCD</option>
</select>
<label>Result <input type="text" value="20" class="result"></label>
</div>
JavaScript
$(document).ready(function() {
// combo list
var combos = ['AB', 'BCD', 'C', 'AD', 'ABCD'];
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
var $total = $section.find('.result');
total = calculateTotal($section);
$total.val(total);
});
// combo selection box logic
$('.helperBox').change(function(){
var $section = $(this).closest(".section");
var $options = $section.find("input[type=checkbox]");
var selectedCombo = $(this).val(); // current selected value
var selectionArray = selectedCombo.split(''); // break current selected value into names
//iterate available options
$options.each(function(i,child){
// if name is present check it, else uncheck it
if($.inArray(child.name,selectionArray) > -1) {
$(child).prop('checked',true);
} else {
$(child).prop('checked',false);
}
})
// set new total and hide the combination select box
var $total = $section.find('.result');
total = calculateTotal($section);
$total.val(total);
$(this).hide();
});
function calculateTotal($section) {
var $total = $section.find('.result');
// get default value of input field
total = parseInt($total.attr('value'));
// if allowed calulate total, elseshow help selection
if(validateCombo($section) > -1) {
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
} else {
$section.find('.helperBox').show();
}
return total;
}
// check if selected combination is allowed, returns -1 if not allowed
function validateCombo(parent) {
var comboString = '';
parent.find('input[type=checkbox]').each(function(i,child){
if($(child).is(':checked'))
comboString += child.name;
});
return $.inArray(comboString,combos);
}
});
The basic idea is to check if the selected combination is allowed (is present in combination "AB BCD C AD ABCD..."). If the combination is not present in the selection we need to show the user a selection box with available combinations.
See on jsFiddle
Here's my approach
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
if ($section.find("input:checked").length>0)
{
total = $section.find('.result').val();
initial = total;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total);
}else {
total = $section.find('.result').val(initial);
}
});
});
input.initial{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result">
</label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="20" class="result">
</label>
</div>
I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
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"/>
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>
<input type="radio" name="tshirt" value="1" ><label>T-Shirt-1</label><br>
<input type="radio" name="tshirt" value="2" ><label>T-Shirt-2</label><br>
<input type="radio" name="tshirt" value="3" ><label>T-Shirt-3</label><br>
<input type="radio" name="tshirt" value="4" ><label>No T-Shirt</label><br><br>
<input type="radio" name="shirt" value="1" ><label>Shirt-1</label><br>
<input type="radio" name="shirt" value="2" ><label>Shirt-2</label><br>
<input type="radio" name="shirt" value="3" ><label>No Shirt</label><br><br>
<hr>
<br>
<input type="radio" name="shorts" value="1" ><label>Shorts-1</label><br>
<input type="radio" name="shorts" value="2" ><label>Shorts-2</label><br>
<input type="radio" name="shorts" value="3" ><label>Shorts-3</label><br>
<input type="radio" name="shorts" value="4" ><label>Shorts-4</label><br>
<input type="radio" name="shorts" value="5" ><label>No Shorts</label><br><br>
<input type="radio" name="pants" value="1" ><label>Pants-1</label><br>
<input type="radio" name="pants" value="2" ><label>Pants-2</label><br>
<input type="radio" name="pants" value="3" ><label>No Pants</label><br><br>
So you are to chose T-shirt + Shirt and then Shorts + Pants on this sample store.
I want to make it so the customer has to pick at least a T-Shirt OR a Shirt AND at least a pair of Shorts OR Pants.
At least one item above the horizontal line and at least one item below the horizontal line has to be picked.
I am guessing I have to use jQuery to force this?
You can perform a check when a submission happens. Here I have used a submit button and validate the inputs upon clicking it. Also I have changed the name attributes of the NO options so that those options won't affect the selection.
var tshirtSelected = false;
var shirtSelected = false;
var shortSelected = false;
var pantSelected = false;
$("#myBtn").click(function() {
$("input[name='tshirt']").each(function(i, obj) {
if ($(this).is(':checked')) {
tshirtSelected = true;
}
});
if (!tshirtSelected) {
$("input[name='shirt']").each(function(i, obj) {
if ($(this).is(':checked')) {
shirtSelected = true;
}
});
}
if (!(shirtSelected || tshirtSelected)) {
alert("Please select a tshirt or a shirt!!!!");
}
$("input[name='shorts']").each(function(i, obj) {
if ($(this).is(':checked')) {
shortSelected = true;
}
});
if (!shortSelected) {
$("input[name='pants']").each(function(i, obj) {
if ($(this).is(':checked')) {
pantSelected = true;
}
});
}
if (!(shortSelected || pantSelected)) {
alert("Please select a short or a pant!!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="radio" name="tshirt" value="1">
<label>T-Shirt-1</label>
<br>
<input type="radio" name="tshirt" value="2">
<label>T-Shirt-2</label>
<br>
<input type="radio" name="tshirt" value="3">
<label>T-Shirt-3</label>
<br>
<input type="radio" name="no-tshirt" value="4">
<label>No T-Shirt</label>
<br>
<br>
<input type="radio" name="shirt" value="1">
<label>Shirt-1</label>
<br>
<input type="radio" name="shirt" value="2">
<label>Shirt-2</label>
<br>
<input type="radio" name="no-shirt" value="3">
<label>No Shirt</label>
<br>
<br>
<hr>
<br>
<input type="radio" name="shorts" value="1">
<label>Shorts-1</label>
<br>
<input type="radio" name="shorts" value="2">
<label>Shorts-2</label>
<br>
<input type="radio" name="shorts" value="3">
<label>Shorts-3</label>
<br>
<input type="radio" name="shorts" value="4">
<label>Shorts-4</label>
<br>
<input type="radio" name="no-shorts" value="5">
<label>No Shorts</label>
<br>
<br>
<input type="radio" name="pants" value="1">
<label>Pants-1</label>
<br>
<input type="radio" name="pants" value="2">
<label>Pants-2</label>
<br>
<input type="radio" name="no-pants" value="3">
<label>No Pants</label>
<br>
<br>
<button id="myBtn">OK</button>