I couldnt find the right answer for my case.
var inputs = $("root :input[typeof]");
// looping thru elements
inputs.each(function(index) {
var name = $(this).attr('name'); // get element by name (or by id)
var value = $(this).val(); // get element value
// How do I capture radio button (or checkbox) group
// element in this loop? And how do I get a checked value of such group?
// Note, in here $(this) should be the radio button group element
}
So, the question is in code comment.
How inside that loop get a value of radio button group element?
In HTML if you refer to such group by name you will automatically get the value of checked radio button in that group.
How do you do that in jQuery, when $(this) is current element in the loop?
Thanks
// Note, in here $(this) should be the radiobutton-group element
if that's the case, then this will find the value of the radio button that is checked:
$(this).find('input:checked').val();
Here is a function to check the radio inputs:
function CheckRadioList() {
$('input:radio').each(function () {
// your code here, you can storage them or do what you want.
console.log($(this).prop('checked'));
});
}
Here is a demo if you want test it: http://jsfiddle.net/jpmbL49r/
name: $(this).attr('name');
id: $(this).attr('id');
checked: $(this).prop('checked')
I hope it's helps!
Related
I am using this simple script provided from a friendly lad in #javascript to uncheck radio buttons:
$('.feed').on('click', 'input[type=radio]', function() {
var myParent = $(this).closest('div');
var ref = $(this);
if( myParent.data('val') == $(this).val() ){
var ref = myParent.find('.none input');
ref.prop('checked',true);
}
myParent.data('val',ref.val() )
});
Everything works fine, see this fiddle, but when I add the attribute 'checked' to one radio button you will actually have to click twice before you can uncheck it, see this fiddle. This got me thinking, is setting 'checked' as an attribute actually equal to checking the radio button by hand? Or why am I failing this?
This has nothing to do with adding an an attribute vs clicking, it's the additional code, specifically this line:
if (myParent.data('val') == $(this).val() ){
which says, if you clicked this before, then turn it off.
However, you're not telling the code that you've already (virtually) "clicked" it.
You can do this by adding the initial value to the 'myParent', one way is to add it to the html:
<div data-val='1'>
Updated fiddle: https://jsfiddle.net/8jh2k8u8/4/
An alternative is to initialise the parent via code by finding the radio that is selected (:checked):
var startup = $(".feed input[type=radio]:checked").first();
if (startup.length) {
startup.closest("div").data("val", startup.val())
}
Updated fiddle: https://jsfiddle.net/8jh2k8u8/5/
I'm creating a form with multiple checkboxes and I want to value of the checked checkboxes to be "yes" and the value of unchecked checkboxes to be "no". The site I'm hosting my form on does not let me add the hidden field with the same name and a different value so I have to find script that will add the hidden checkbox on submission and include the value of "no". Currently, when I submit the form the unchecked boxes are recorded as undefined but for data purposes I need it to be filled with "no".
Here is what I found:
$(document).ready($("#foo").submit(
function() {
// Add an event listener on #foo submit action...
// For each unchecked checkbox on the form...
$(this).find($("input:checkbox:not(:checked)")).each(
// Create a hidden field with the same name as the checkbox and a value of 0
// You could just as easily use "off", "false", or whatever you want to get
// when the checkbox is empty.
function(index) {
var input = $('<input />');
input.attr('type', 'hidden');
input.attr('name', $(this).attr("name")); // Same name as the checkbox
input.attr('value', "no"); // or 'off', 'false', 'no', whatever
// append it to the form the checkbox is in just as it's being submitted
var form = $(this)[0].form;
$(form).append(input);
} // end function inside each()
); // end each() argument list
return true; // Don't abort the form submit
} // end function inside submit()
));
Why is the script not working?
You need to check out the jQuery API documents
$(document).ready(function(){}); it takes function callback, which may not needed here.
$("#foo").submittakes function callback, which will be called right before the form is submitted.
No need to wrap selector in $.find
You need to figure out the context of this
The this in $(this).attr("name") is referring the input box
The this in $(this)[0].form is still the input box
I guess you are trying to get the reference of forms. You may use document.forms
You need to change the input with $(this). Within the .each function $(this) will refer to the checkbox itself.
It isn't normal to have severals input with same name you can put the value directly in checkbox
$(this).find($("input:checkbox:not(:checked)")).each(function(){
$(this).val($(this).is(':checked') ? "yes" : "no")
})
I was able to use this much simpler script. Works perfectly.
$('#foo').click(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','yes');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:'no'}));
}
});
});
Got this script that gets the value of a checked radio button and prints it out in another tag. It works perfectly when you click a radio button, but I've realized that I need to have some of the radio buttons checked by default.
How do I change this script so that it will output the values of already checked radio buttons on page load as well?
$("input[type='radio']").click(function(){
var radioValue = $(this).val();
if(radioValue){
$(this).closest('section').find('h2 .value').text(radioValue);
}
});
Fiddle: https://jsfiddle.net/tactics/bykf31e6/4/
You can use the :checked selector to find all the checked :radio elements on load, and the loop over them to set the value of the related .value element. Try this:
$(":radio:checked").each(function() {
$(this).closest('section').find('h2 .value').text(this.value);
});
Example fiddle
Note that you should use the change event for binding to radio and checkbox elements to cater for those who navigate websites using their keyboards. Also, if you remove the check that the radio element has a value (which is redundant as they should always have a value) you can simplify the code:
$("input[type='radio']").change(setText); // when user selects
$(":radio:checked").each(setText); // onload
function setText() {
$(this).closest('section').find('h2 .value').text(this.value);
}
Example fiddle
Hi guys I am having a problem with Events. I have a checkbox list and I have a main check box that checks all boxes. When I clickEvent some of my checkbox list items it should add data-id attr to the "selected obj". So in my case when I press main check box to check all others every thing is ok (it simply clicks all other elements). but when i do that it empties my array. I mean if i uncheck it will be the way it supposed to be but checked (when uncheck it fills when i check it empties).
......
var selected = {};
var reload = function(){
selected = {};
$('.checkbox_all').unbind('click');
$('.table_checkbox').unbind('click');
$('.checkbox_all').bind('click', checkAll);
$('.table_checkbox').bind('click', checkMe);
}
var checkMe = function(e){
var checkbox = $(e.target);
var id = checkbox.attr('data-id');
//console.log(id);
if(checkbox.attr('checked')){
selected[id] = id;
}else{
if(selected[id]) delete selected[id];
}
console.log(selected);
}
var checkAll = function(e){
if($(e.target).attr('checked')){
$('.table_checkbox').each(function(){
if($(this).attr('checked') === false){
$(this).click();
}
});
}else{
$('.table_checkbox').each(function(){
if($(this).attr('checked') === true){
$(this).click();
}
});
}
//console.log(selected);
}
.......
HTML:
<tr><th class="table-header-check"><input type="checkbox" class="checkbox_all"/></th></tr>
<tr class=""><td><input type="checkbox" data-id="5" class="table_checkbox"></td></tr>
<tr class="alternate-row"><td><input type="checkbox" data-id="6" class="table_checkbox"</td></tr>
<tr class="alternate-row"><td><input type="checkbox" data-id="8"
....ETC\
My problem is that when i click .checkbox_all it should click on all .table_checkbox(that r cheched or uncheched)... it just clicks all checkboxes like a main checkbox... it works fine, but i have an event all other checkboxes if i click em i add some data to array when i unclick em it removes data from array.... so when im clicking checkboxes sepperatly they add /remove data to array properly... but when im clicking on main checkbox... it clicks on right checkboxes but the data array is empty when all checked and full when all unchecked... it must be the opposite way
Could you instead go for a cleaner solution, and generate selected on the fly? See here for an example (and a JSFiddle for everyone else): http://jsfiddle.net/turiyag/3AZ9C/
function selected() {
var ret = {};
$.each($(".table_checkbox"),function(index,checkbox) {
if($(checkbox).prop("checked")) {
ret[$(checkbox).prop("id")] = true;
}
});
return ret;
}
** EDIT: **
If you're looking to have an array that is added to and removed from, then this JSFiddle (http://jsfiddle.net/turiyag/pubGb/) will do the trick. Note that I use prop() instead of attr(), in most cases, especially this one, you should use prop() to get the value you want.
To work with your own code you need to understand the order of events. When you programmatically call click() on the checkbox the javascript (checkMe() for children) executes before the state of each child checkbox is changed (e.g., adding attribute 'checked'). It is because of this reason that the checkMe() function was adding and removing ids in the selected array in the reverse order. You can confirm this by adding the following debug line in the checkMe function:
console.log('Checked state of checkbox id:' + id + ' is: ' + checkbox.prop('checked'));
Case1: Clicking checkAll when it is Unchecked; it calls checkMe() for each child checkbox but finds the 'checked' attribute as undefined. So it executes the delete code. After executing checkMe the 'checked' attribute is added on the checkbox.
Case2: Clicking checkAll when it is Checked; the checkMe() function finds the 'checked' attribute previously added and fills the array. Later an event is probably fired to remove the 'checked' attribute.
I changed the following lines to quickly test this and seems to be working:
Bind checkMe on change event instead of click in reload function:
$('.table_checkbox').bind('change', checkMe);
Change the condition for unchecked children in checkAll function when the .checkbox_all is checked:
if($(this).prop('checked') === false) {/*call child click*/}
//Use prop instead of attr because it takes care of 'undefined' cases as well. If you want to keep using attr because you're on an older version of jquery then add something like:
typeof $(this).attr('checked') == 'undefined'
and also the condition when .checkbox_all is unchecked:
if($(this).prop('checked') === true) {/*call child click*/}
Hope this helps. Here's a jsbin to play with..
I've seen many examples in stackoverflow getting the group radio value using input name. Is there any way to find it using id ?
It's generally better to use the name as it enables you to know which radio button in a group is selected (all radio buttons in a group have the same name but only one has a given id).
But if you want to check whether a particular radio button whose id you have is checked, you can do this :
var yesorno = document.getElementById('someId').checked;
Demonstration
If you want to get the value of the radio button whose id you know, it's simply
var value = document.getElementById('someId').value;
Short answer, not really.
You got to have a name otherwise the radio buttons will not work together, meaning all of them could be checked. When you already have a name, get the value by:
$('[name="myGroup"]:radio:checked').val()
I found out myself. This code worked for me!.
alert($('input[id=groudid]:checked').val());
var name = $("#myId").attr("name")
$(":radio").filter(function(){return $(this).attr("name") == name}).filter(":checked").val()