Welcome
I have a problem. I'm trying to build a javascript function that will retrieve me from the selected radiobutton value to div dynamically, after page loads. On the side I have several groups radiobutton. The function is to check which radiobutton is selected, regardless of which group it is and return the value to a div. Additionally, I would like that everyone is not selected range value has been added to the same div.
function returnRadio(){
return $('div :radio:checked'); // you can use class or id to your div
}
returnRadio();
To assign the first selected radiobutton to a div, you coud do this:
$("#your_div").text( $(":radio:checked:first").val() );
As you have many radio button groups, you could have many selected radios at a time. To retrieve them all, you can do this:
$(":radio:checked").each(function(){
alert($(this).val());
});
Hope this helps. Cheers
Related
I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?
like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle
I have a top level select box that when a user makes a selection here, I want this value to be used for all the below select boxes relating to this top level box.
The problem I am having is that, if any one of the lower select boxes is disabled, I want the above process to ignore this select box as it has already been assigned a value.
Obviously, if the lower select box is enabled then I want to assign the top select value to it.
To disable the select list based on a particular value, I have used:
$("select[name=f03]").eq(index).attr('disabled', 'disabled');
Here is the jQuery that I have used but is not working:
var top_select = $("select[name=f07]").val();
$("select[name=f03]").each(function(index){
if $("select[name=f03]").eq(index).is(':enabled'){
$("select[name=f03]").eq(index).val(top_select);
}
});
From this code, it is the lower selects ([name=f03]) that I am trying to set only when it is enabled.
First I would disable select like this:
$("select[name=f03]").eq(index).prop('disabled', true);
Second, your function should be much simpler:
$("select[name=f03]").each(function(){
if ($(this).prop('disabled')) return;
$(this).val(top_select);
});
you should use jquery :enabled selector as follow
$("select[name=f03]:enabled").each(function(){
//execution
});
or
$("select[name=f03]:enabled").val("value");
here is jsfiddle example http://jsfiddle.net/kso2oqr5/1/
When you are disabling elements use .prop(property,value)
var top_select = $("select[name=f07]").val();
$('select[name="f03"]').val(function(){
if(!this.disabled){
return top_select;
}
});
DEMO
I created a HTML table that has a radio button, delete button, and a text box in each row. When I select the apply button, I want to get the value of the text box in the same row as the checked radio button. Attached is my fiddle. Any help would be greatly appreciated :)
<input type="text" name="context" class="chooseContext"/>
This is the text that I am wanting to figure out how to alert based on which radio button is selected.
JSFiddle Code
Not sure if it's the most elegant solution but you can do this
//Send selected default to add on
$(".contexts-list tr input[type='radio']:checked").each(function() {
var val = $(this).parents("tr").find("input.chooseContext").val();
alert("Default: " + val);
});
Demo of it working
you can alert it like this:
$('#applyButton').on('click', function(){
var alertTxt = $(':radio:checked').closest('tr').find('.chooseContext').val();
alert(alertTxt);
});
Updated Fiddle
I solve this kind of things by using parents property in jQuery.
so usually when you click on something do a
$(this).parents('tr').find('input[type=text]').val();
So the hint here is to pick up the parent element row and then try finding the desired element in that row to take action.
You can set a number on id of input radio and input text, then you can check what of the radios of the same group is checked, then take the id of this radio and get the val of input text that has the same id. Wait i´m doing the jsfiddle... Regards!
EDIT: Here are users faster than me, Regards!
Ok, I have a situation where I have a page which has checkboxes on it next to items with input text fields.
I have a button at the top with the same fields of which the user can use to apply the settings to all the fields in the page that have been selected with their respective checkbox.
I'm trying to work out how to get all the checkboxes in the page that have been checked an then loop through them so I can possibly grab the ID for that row and then update the respective items, but I'm not 100% sure how to do this.
Each of the checkboxes on the page have the same class name, so I thought something like this would work..
var selected = $('input:checked', '.discount_select');
But it doesn't appear to work.
Here is a example checkbox and it's corresponding text box..
<input type="text" size="4" name="discount[101129]">
<input type="checkbox" value="1" class="discount_select" name="select[101129]">
So basically I wanna loop through the found selectec checkboxes, hopefully be able to pull out the id 101129 somehow and then be able to update the textbox with that same id.
JsFiddle: http://jsfiddle.net/79udU/
This should work:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val(this.name);
});
});
Demo: http://jsfiddle.net/79udU/1/
Edit: To actually apply the value from the top input, use this:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val($("#apply_discount").val());
});
});
Demo: http://jsfiddle.net/79udU/2/
you need
var selected = $('input.discount_select:checked' );
This might be similar to getting length of a class. But I am not getting the actual output for toggle class.
So here is the scenario: I have a table in which there is a checkbox in every row. If check all option is selected, all checkbox is marked. Now the problem is that I want to pass flag as true when all checkbox are checked and false when only some checkboxes are checked. Now I use toggling functionality. So I don't know how I get length of 'unchecked' checkboxes rather than 'unchecked checked' checkboxes.(I am using Div's for styling instead of checkboxes. )
Here is the jsfiddle
Script for counting length:
$("#cntCheck").click(function(){
alert($('.isChecked').length); //Counting Checked CheckBox(Working right).
});
$("#cntUncheck").click(function(){
alert($('.checkBox isChecked').length); //Counting Unchecked CheckBox Except CheckAll checkbox(This is not working)
});
If I understand your (very confusing) question correctly, you're asking how to count the elements that do have the checkBox class but don't have the isChecked class. If so, you can use the .not() method:
$(".checkBox").not(".isChecked").length
Or, the :not() selector:
$(".checkBox:not(.isChecked)").length
Regarding your styling:
"I am using Div's for styling instead of checkboxes."
I would strongly recommend against doing this, because users who don't like to (or are physically unable to) use a mouse or other pointing device can't click your pseudo-checkboxes.
See this fiddle - http://jsfiddle.net/Yp56c/3/
$("#cntUncheck").click(function(){
var notChecked = $('.checkBox').not('.isChecked').length;
alert(notChecked); //This is working
});