I am trying to check if a set of radio buttons has been selected. However, it seems that it does not update if a radio is selected after the fact.
The code:
$('button#submit').click(function() {
var addr_chkd = 0;
$('input:radio[name="address"]').each(function() {
if (!$(this).attr('checked'))
addr_chkd++
});
});
if (addr_chkd)
// do something
When the button is clicked and nothing is selected, the code works great. However, when a radio button is selected and the button is clicked, addr_chkd still returns a value greater than zero.
[UPDATE]
The issue is that I'm checking for addr_chkd greater than zero. I should be checking if addr_chkd is equal to the length of the radio buttons. I made a slight modification to #PPvG's answer and it did the trick.
$('button#submit').click(function() {
var radios = $('input:radio[name="address"]');
var num_unchecked = radios.filter(':not(:checked)').length;
if (num_unchecked === radios.length) {
alert('please select a button');
}
});
try this
$('button#submit').click(function() {
var addr_chkd = 0;
$('input:radio:[name="address"]').each(function() {
if (!$(this).is(':checked'))
addr_chkd++
});
});
or you can simply do it as
$('button#submit').click(function() {
var addr_chkd = $('input:radio[name="address"]:not(:checked)').length
}
since at a time only one radio button can be checked so you can also do as
$('button#submit').click(function() {
var addr_chkd = $('input:radio[name="address"]').length - 1;
}
fiddle example for all the above : http://jsfiddle.net/pdm2F/
I'm not entirely clear on what you're trying to do, but I can interpret addr_chkd in two ways.
If the "addr" stands for "adder", and you want to count the number of unchecked radio buttons, use this:
$('button#submit').click(function() {
var radios = $('input:radio[name="address"]');
var num_unchecked = radios.filter(':not(:checked)').length;
if (num_unchecked) {
// do something
}
});
If, on the other hand, "addr" means "address", and you want the index of the selected radio button, use this:
$('button#submit').click(function() {
var radios = $('input:radio[name="address"]');
var checked = radios.filter(':not(:checked)').get(0);
if (checked.length > 0) {
var index_checked = radios.index(checked);
// do something
}
});
Note that in both cases, I moved the if clause inside the click handler. In your example, it was outside the click handler, which means it would be executed only once, and even before the button was clicked.
You can use a much easy way:
var addr_chkd = $('input:radio[name="address"]:checked').length;
Or if you mean not checked:
var addr_chkd = $('input:radio[name="address"]').not(':checked').length;
But for the radio input, you may do something wrong.
Use $(this).attr() instead of this.
Related
I have the following question, when I change the value of the combobox, the checkboxes are still marked, with prop the values are unmarked, but this time it does not work, the idea is to reset the marked checkboxes when the value of the checkbox is changed.
Regards.
var cambio = $("#cmbKit").on('change', function () {
var checkPoint = !$(this).data('checked');
$('#tblCajas input[type="checkbox"]').each(function () {
if (checkPoint == true) {
$(':checkbox').prop('checked', false);
$("input[type='checkbox']").prop('checked', false);
}
});
});
if (cambio) {
selectedBox = 0;
$('#divCalculos').hide();
$('#btnPlanificar').hide();
}
As you want to reset every checkbox on change event of combobox, you can use below code -
$("#cmbKit").change(function() {
$("input[type='checkbox']").prop('checked', false);
});
You shouldn't use any if condition as you are going to reset it after every change event.
Please note that given code will reset all checkboxes on page, add table selector as well in case you have multiple table with different content.
Hope this helps.
I've been using a simple select all script for checkboxes for a while now that looks something like this:
<span id="select">Select All</span>
with
$('#select').click(function(event) {
var $that = $(this);
$('.checkbox').each(function() {
this.checked = $that.is(':checked');
});
});
It's fairly simple. It attaches to an onclick, loops through all the inputs with the class .checkbox and checks or unchecks them accordingly. However what I'd like to do now is make it a bit more user friendly adding the following functionality to it.
1) When the user click the link labeled "Select All" it should select all check boxes as normal, but then change the text to "Deselect All". Similarly, when the user clicks "Deselect All" the text would go back to "Select All".
2) If the users manually select all check boxes I'd like check for this scenario and update the text from Select All to Deselect All as well.
Your code is checking whether a <span> is :checked, which as far as I know is not possible. Perhaps I'm wrong, but in this answer I'll use a different approach to keeping track of that, a data attribute.
// initialize 'checked' property
$('#select').data('checked', false);
// make link control all checkboxes
$('#select').click(function(event) {
var $that = $(this);
var isChecked = ! $that.data('checked');
$that.data('checked', isChecked).html(isChecked ? 'Deselect All' : 'Select All');
$('.checkbox').prop('checked', isChecked);
});
// make checkboxes update link
$('.checkbox').change(function(event) {
var numChecked = $('.checkbox:checked').length;
if (numChecked === 0) {
$('#select').data('checked', false).html('Select All');
} else if (numChecked === $('.checkbox').length) {
$('#select').data('checked', true).html('Deselect All');
}
});
Not jquery, but here's what I'd do
var cb=document.getElementsByClassName('cb'); //get all the checkboxes
var selectAll=document.getElementById('selectAll'); //get select all button
function selectAllState(inputEle,selectAllEle){ //class to manage the states of the checkboxes
var state=1; //1 if button says select all, 0 otherwise;
var num=inputEle.length;
function allChecked(){ //see if all are checked
var x=0;
for(var i=0;i<num;i++){
if(inputEle[i].checked==true){
x+=1;
}
}
return x;
}
function handler(){ //if all checked or all unchecked, change select all button text
var y=allChecked()
if( y==num && state){
selectAllEle.innerHTML='Deselect All';
state=0;
} else if(y==0 && !state){
selectAllEle.innerHTML='Select All';
state=1;
}
}
for(var i=0;i<num;i++){
inputEle[i].addEventListener('change',handler); //listen for changes in checks
}
function checkAll(){ //function checks or unchecks all boxes
for(var i=0;i<num;i++){
inputEle[i].checked=state;
}
handler();
}
selectAll.addEventListener('click',checkAll); //listen for button click
}
var myState=new selectAllState(cb,selectAll); //instance the selectAllState class
This creates a javascript class to manage the states of all your checkboxes. It takes two arguments, the first being the array of checkboxes (which is what you get if you use getElementsByClassName), and the second being the select all button. The internal methods could be exposed using the this keyword if you want to be able to, for example, have a different part of the application select or deselect all the checkboxes.
Try breaking it down in several functions: Let's call the span toggle, as it can select and de-select all.
<span id="toggle">Select All</span>
And we'll have a function to select and de-select all of the values. No need to iterate through the list as prop sets the value for all elements
function SetAll(value){
$(".checkbox").prop("checked", value);
}
Then for the toggle button:
$("#toggle").click(function(){
if($(this).text() == "Select All"){
SetAll(true);
$(this).text("De-select All");
} else {
SetAll(false);
$(this).text("Select All");
}
});
Finally we need an onchange event for each checkbox:
$(".checkbox").change(function(){
var allCheckboxes = $(".checkbox");
var allChecked = $.grep(allCheckboxes, function(n,i){
return $(n).is(":checked");
}); //grep returns all elements in array that match criteria
var allUnchecked = $.grep(allCheckboxes, function(n,i){
return $(n)is(":checked");
},true); //invert=true returns all elements in array that do not match
// check the lengths of the arrays
if (allChecked.length == allCheckboxes.length)
$("#toggle").text("De-select All");
if (allUnchecked.length == allCheckboxes.length)
$("#toggle").text("Select All");
}):
I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.
I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});
I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?
You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});
First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});
First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});
You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change
Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?
First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});
This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});
$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this
Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})
Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});