$(function () {
$("#MyInputBox").keyup(function () {
var nextChk = $(this).next(":radio:checked").attr('id'));
alert(nextChk);
});
});
What is the correct way to say "Get the ID of the next checkbox which is checked" Am I even close?
Assuming your radio inputs are all siblings, you'd need to use .nextAll(), and then narrow down to the first match.
$(this).nextAll(":radio:checked:first").attr('id');
or
$(this).nextAll(":radio:checked").first().attr('id');
Or you could technically use .nextUntil() with .next().
$(this).nextUntil(":radio:checked").next().attr('id');
Also, I see that you're asking about checkboxes, but your code uses :radio, so I guess I don't know which one you actually want.
Related
Using:
function CheckToggle(which){
jQuery(which).each(function() {
jQuery(this).attr('checked', !jQuery(this).attr('checked'));
});
}
On first click, all checkboxes get checked, click it again, and they get unchecked.
Second click, no checkmarks show in the boxes, however, the checked="checked" attribute does appear in the element, and dissapears if clicking the checkall again.
How can I keep them showing the checkmark?
In this situation, .prop() would be used instead of .attr(). But honestly, it'd be even better to not use either:
this.checked = !this.checked;
Use prop instead of attr
function CheckToggle(which){
jQuery(which).each(function() {
jQuery(this).prop('checked', !jQuery(this).attr('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
});
I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.
a nice member here helped me set up a multiple checkbox example that stores the data to be shown in a div. However, when I try to do multiple of these, they interlap with each other and show the same data in the divs even when I changed variables.
I set up a simple example here:
http://jsfiddle.net/pufamuf/vrpMc/4/
Thank you for your time everyone :)
That's because you're using the same selector in both event handlers: input[type="checkbox"]:checked
This will select all checked checkbox inputs in the page.
You should instead use input[name="car[]"]:checked and input[name="phone[]"]:checked
to select only the inputs with the given name, each time.
In both your functions, you're selecting all of the selected checkboxes. My fix (and someone else might have a better one) would be to add unique ids to the ul's surrounding the li's.
html:
<ul id='electronics'>
<li><input type="checkbox" name="phone[]" value="Nokia" />Nokia</li>
That way you can modify your $('#submit').click handler to something like this:
$('#submit').click(
function()
{
var htmls = "";
$('ul#electronics>li>input[type="checkbox"]:checked').each(
function()
{
htmls += $(this).val() + " ";
}
);
$('.here').html(htmls);
}
);
Check out http://api.jquery.com/child-selector/, http://api.jquery.com/id-selector/ for more info.
Basically, without this or a similar change, there's nothing distinguishing your list of car brands from your list of electronics brands, and your click handlers both consider all of the checked checkboxes.
Well, I'm stuck and have been banging my head for a little while now to try to figure what I'm doing wrong.
Scenario:
I have a question with a Yes/No answer (ie 2 radio buttons). When a user selects the either Yes or No, I call a function to .toggle() a hidden div to show a link. That works great. And if they go back and check that Yes/No again it disappears again due to the .toggle()
My issue is that if a user clicks the No (and the link is shown) but then clicks the Yes I want the link that is showing due to the No result to disappear and vice-versa.
So basically only show 1 link at a time.
I figured that maybe an If statement would work but I can't seem to get it right.
My code:
<div id="Question1">
<div>Do you kazoo?</div>
<input type="radio" ID="Q1RB1" runat="server" value="Yes" text="Yes" name="RadioGroup1"/>Yes<br />
<input type="radio" ID="Q1RB2" runat="server" value="No" text="No" name="RadioGroup1"/> No
<span id="Q1RB1Results" style="display:none"> <a href=#>Click here</a></span>
<span id="Q1RB2Results" style="display:none"> <a href=#>Click here</a></span>
</div>
My jQuery code that works for each individual radio button:
$("input[id$=Q1RB1]:radio").change(function () {
$("[id$=Q1RB1Results]").toggle();
});
$("input[id$=Q1RB2]:radio").change(function () {
$("[id$=Q1RB2Results]").toggle();
});
This is the If statement I'm trying to get to work. Amy I going about this the wrong way?
if ($("input[id$=Q1RB2]").is(":checked")) {
$("input[id$=Q1RB2]:radio").change(function () {
$("[id$=Q1RB2Results]").toggle();
});
});
Thanks for any thoughts/advice. I've tried a multitude of answers here in Stackoverflow and the 'net but can't seem to figure out what I'm doing wrong. :(
~V
Update: I put a sample form and the dialogue up on JSFiddle. http://jsfiddle.net/Valien/7uN6z/4/ I tried some of the solutions mentioned here and couldn't get them working so not sure what I'm doing wrong.
When you register an event listener in JQuery (.change, .click, .blur, etc.), the Javascript engine matches the selector and applies them at that point. With that in mind, you can rearrange your code (which is close to being right) to this, which should do the trick:
/* The function you're about to define applies to all radio button
inputs whose ID ends with Q1RB2 */
$("input[id$=Q1RB2]:radio").change(function()
{
/* Inside the change function, $(this) refers to the instance that
was changed. So, this checks to see if the instance that was just
changed is currently checked, after being changed. */
if ($(this).is(":checked"))
{
// If that was the case, then toggle the item
$("[id$=Q1RB2Results]").toggle();
}
});
Try this:
$('input:radio[name=RadioGroup1]').change(function(){
var show = "#" + $(this).attr('id') + 'Results';
$('#Question1 span').hide();
$(show).show();
});
I believe this is what you need:
// declare common variables so it's easier to target
var question = $("#Question1"),
group = question.find("input[name='RadioGroup1']"),
span = question.find("span");
// change listener for each radio button group
group.click(function(){
var id = $(this).attr("id"); // get the radio button id for reference
span.each(function(){ // loop through each span and check which one to hide/show
var item = $(this);
if (item.attr("id")===id+"Results") { item.show(); } else { item.hide(); }
});
});