I'm having some trouble using JQuery to check and uncheck an input. I know that .prop is the proper way to do it, but it doesn't seem to be working for me. Here's my code:
HTML:
<div class="checkwrap"><input name="mentoringType" type="checkbox" checked="false" value="test">test</div>
JS:
$('.checkwrap').click(function() {
if ($(this).find('input').is(':checked')){
$(this).toggleClass('checkwrap-active').find('input').filter(':checkbox').prop('checked',false);
} else {
$(this).toggleClass('checkwrap-active').find('input').filter(':checkbox').prop('checked',true);
}
});
The input is wrapped for styling purposes. If I use .attr('checked',true/false) instead, then it works to change the checked property to checked, but it does not uncheck. What's going on?
Eggplant is right: you should use a lebel element to make "test" clickable.
To answer your question:
Your skript does work, when only the text ist clicked.
It also works, but not as expected, when the checkbox is clicked. In this case your code leads to a duplication of the ation executed, because the click event bubbles up the DOM tree.
If the checkbox is not selected, a click on it makes it being selected and your code comes in, detects it as being selected and unselects it again.
For an unselected box it works vice versa.
But as stated before: you should have chosen a label in the first place.
Related
I can usually determine if a particular input has focus using $("#my_input").is(":focus") but this doesn't seem to work for selectize inputs.
I can set the focus for the input using $("#my_input")[0].selectize.focus() but then still $("#my_input").is(":focus") returns false.
When I inspect the element in Chrome I can see that a div right below my_input has the class attribute focus but it is not clear to me how to link this to #my_input.
I have also tried document.activeElement and document.activeElement.parentElement, etc. but no luck so far
Selectize.js is hiding the input you wrote in your markup and shows some dynamic elements instead.
Those are next to your original input.
Try:
if( $("#my_input").next(".selectize-control").find(".focus").length>0 ){
console.log("Selectize is focussed!");
}else{
console.log("Selectize is NOT focussed.");
}
If you follow me on this... By looking in the "next" div if there is a child having the focus class, you'll know if it's focussed or not..
Is there way that i could identify where a radio option value gets changed, either thru watch expression on firebug or inspect element ?
i am remote debugging a website and there are 4 radion buttons in the website. We set the CHECKED property for my 4th option as true, it gets checked. But after a sometime(1 sec) my first option gets selected automatically. There are too many javascript code involved and i am not sure where to check.
So is there any way i can do a debug-BREAK when a watch expression fires or any other way to debug this?
You can do this using jquery:
$('input[type=radio][name="inputName"]').on('change',function(){
//#myForm is the id of the form that the radio box in
alert($('input[name="inputName"]:checked', '#myForm').val());
});
This will alert the new value of the radio box when changed JsFiddle
TL;DR how can I get this self-explanatory JSFiddle to work?
From the W3C:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
The basic idea, HTML:
<form>
<label>
<input type="text" />
after focusing in input, there should be no blur when clicking here
</label>
</form>
but blur should fire when clicking here
And JS:
$("form, label").on("blur", function() {
alert("you're not going to see this");
});
It doesn't work. A more illustrative example is in this JSFiddle.
I also tried focusout, with this JSFiddle, but (presumably because it bubbles up from the input), it always fires.
I could probably rig up what I need with a hack like this: https://stackoverflow.com/a/5049387/458614 but I'd rather not have to.
Edit: There are lots of related questions and I have read all that I could find, none of which help. Some talk about setting tabindex=0 on the form or label elements. I have tried this in various permutations but it doesn't help. JSFiddle here. If you put it on the form, blur events do fire when you click outside the form. However, it doesn't apply to any of it's children: it won't pick up anything if you click on the input and then outside the form.
Edit 2: I don't really understand some of the answers posted so far and none seem to really... work. Anyway, to clarify, here is what I am trying to accomplish:
In my app, you can add tags to documents. When you click the "add tag" button, a previously-hidden text input field pops up and is focused. And then...
Clicking outside (on blur) should close the text input field again
Pressing enter should add the tag and close the input field
Clicking the "add tag" button should also add the tag and close the input field
The problem is that #1 and #3 are incompatible. The "add tag" button needs to perform a different action based on whether the text field is open or closed, but because I can only achieve #1 with an onblur event on the text field, the text field is closed by the time any action happens on the "add tag" button for #3.
Here is a JSFiddle with my best attempt so far.
The thing I think you are looking for is
e.stopPropagation();
This Fiddle here shows a little different way to handle it ... it put the hide on a window click (which would blur the input anyways) except on the label, which it would allow the click event to stop inside the label.
Happy coding!
use the below code to achieve the desired
$(document).on("blur", "label",function() {
$("div").append("form or label blurred<br>");
});
Here is the demo Fiddle
Try this it should work
.focus {
border-color:red;
}
$(document).ready(function() {
$('input').blur(function(){
$('input').removeClass("focus");
})
.focus(function() {
$(this).addClass("focus")
});
});
Add this piece of js in your Fiddle. you added listener for label but blur happens on anchor tag.
$("form a").on("blur", function() {
$("div").append("form or label blurred<br>");
});
according to your explanation i have create a demo
$("form > label >a").on("blur", function() {
return false
});
$("#outsideform > a").on("blur", function() {
alert("but blur should fire when clicking here");
});
Check the Demo here
For a while, I am posting an intermediate development. But this definitely will help you where exactly you should look for. The jquery implementation but not your javascript.
This is the real concern.
I have added 3 lines at different places. no big changes.
Added an || $("input").css("visibility") == "visible" to the if
condition
Added $("input").css("visibility","hidden"); to the inner else condition
$("input").css("visibility","visible"); to the outer (and last) else condition.
Please note this is intermediate, you need to click twice after a submit of non-empty text.
If I get time, I would post the correct working thing.
This is the fiddle.
tobek, your JSFiddle with my best attempt so far is almost there. The problem is your selector at the bottom in this section of code:
$("input").on("blur", function(){
$("input").hide();
});
You stated the problem correctly in your comments when you said: "THE PROBLEM: we never get in here because it's already been hidden because the input blurred".
Change the above section to this and I think you'll have what you're looking for.
$("input-blur label").on("blur", function(){
$("input").hide();
});
Because the "Add tag" link is inside the label clicking it doesn't trigger your "blur" function.
Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.
Tested on
Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)
Details
Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.
<div id="myRadioList">
<div>
<input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
</div>
<div>
<input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
</div>
</div>
What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.
I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.
This is what I'm doing to set the currently clicked radio, that is not working:
$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');
I'm simplifying my code to avoid posting unnecessary details.
The checked attribute in HTML is the default value.
The checked property in JavaScript refers to the current state of the radio button.
Generally, it's best to let the browser handle the checked state of radio buttons and checkboxes rather than setting it yourself, otherwise you run into these kinds of problems. It's safe to get the current state via prop("checked") as already suggested, or through .is(":checked").
You may also want to consider using syntax like $('#myRadioList').find('input[value="myRadioName_val2"]') or better yet, $('#myRadioName_val2'), as child selectors in jQuery can be rather slow, since they are read right to left.
You should use
$("#myRadioList > div > input[value=myRadioName_val2]").prop('checked', true);
Well, you do have a syntax error withing the jQuery selector. It should be:
$('#myRadioList > div > input[value="myRadioName_val2"]')
I am using jQuery to hide form fields (I am manipulating checkboxes and radio buttons).
In FF and Chrome, when I click the associated label, the form field still activates and checks. In IE, that does not happen.
How can I have the label activate the checkboxes/radio buttons in IE?
I've experienced this before as well. You may be better off moving the hidden fields off the screen instead of hiding them.
In fact, I did ask that question on SO:
IE - hidden radio button not checked when the corresponding label is clicked
How are you hiding it? You may need to move it off-screen via some radical css:
.hidden { position:relative; left: -10000 }
And then toggle the .hidden class to show/hide the element.
I've run into this too. IE will not change the value of hidden form fields. You have to unhide them first. Probably the easiest way is to add an onclick action to all labels that are allowed to have hidden form fields. Something like:
$("label.hideablefield").live('click', function(){
var fid = $(this).attr('for');
$('#'+ fid).show();
$('#'+ fid).select(); //or maybe .focus, I'm not sure
});
Obviously, this only turns the field on. You'd need to set up a toggle condition for re-hiding/unselecting.