Toggle classes with radio button in jQuery - javascript

I have a set of radio buttons where when I click a radio button, I want the label to change color or whatever. But when I click another radio button, the color goes away. Therefore I have something like this:
jQuery('label').mouseup(function(){
jQuery(this).prev().attr('checked', 'checked');
jQuery('input').next().removeClass('selected');
jQuery('input:checked').next().addClass('selected');
});
if you need to see some html:
<input type="radio" id="radio1" name="myRadio" value="option-1" />
<label for="radio1">Label 1</label>
<input type="radio" id="radio2" name="myRadio" value="option-2" />
<label for="radio2">Label 2</label>
This first removes 'selected' class from all the labels and then re-applies to only the checked labels.
It works and is simple, but I was thinking this might not be the most efficient way of doing this. I imagine that javascript is iterating through each input element and using more resources than necessary.
I'm curious if anyone knows of a common way of doing this more efficiently. I seem to be doing this type of thing quite often in my jQuery code. I've just been using jQuery for the past 3 months or so btw.

There are a few things I think are worth mentioning.
Clicking on a <label> will automatically change the value of the <input>. You don't need to set the checked attr manually, and therefore could bind to the change event on the radios instead. This will also allow keyboard events to select/deselect the radios, and will work anytime the radio values change, not just when someone raises their mouse over a label.
Also, you can save the whole collection of radio inputs in its own variable to make referencing them later not have to search through the DOM again.
Suggested code (w/ jsfiddle preview)
var $radios = jQuery('input[type=radio]');
$radios.change(function() {
$radios.next().removeClass('selected');
$radios.filter(':checked').next().addClass('selected');
});

Besides the use of mouseup who seems a little bit unusual in this case (at least, to me), your code is fine.
I'd use click or change.

It actually looks like it works when clicking the label. I wouldn't worry too much about the number of DOM elements searched as long as the performance is ok. Optimize when it becomes a problem and not before. Clarity/readability is probably more important. You might be able to improve it, though, by using some information from the label or its related input to narrow down the selectors. Using end and filter would also allow you to reuse the second query.
$('label').click(function(){
var radio = $(this).prev();
radio.attr('checked', 'checked');
var name = radio.attr('name');
$('input[name=' + name ']').next()
.removeClass('selected')
.end()
.filter(':checked')
.next()
.addClass('selected');
});
Note that using change on the actual radios, as some others suggest might be better. You could use the same techniques with that.
$('input[type=radio]').change( function() {
$('input[type=radio]').next()
.removeClass('selected')
.end()
.filter(':checked')
.next()
.addClass('selected');
});
Use live handlers if you are adding radios dynamically to the page.

Related

JQuery selector to negate specific HTML elements within a parent element

I have HTML label structures generated by a JQuery multiselect dropdown library as shown:
<label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label>
<label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label>
My requirement is: except the input element, whenever the user clicks on anywhere else in the
<label></label>
(including the label) area,I need to do event.preventDefault(). I have tried as
$(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){
event.preventDefault();
});
But the above handler gets triggered even when I click on the <input> within the label as well(which is obvious and I know that!)
How do I write a JQuery selector for to filter this.
The best thing would be to have the input out of the label... But:
I do not have control over this markup structure... (your comment on another answer)
You can use .stopImmediatePropagation() on the <input> elements... So the click event won't bubble up to the label.
See below... Try a click a label, then on a radio.
$(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){
console.log("Clicked on a label");
event.preventDefault(); // Don't know if that is useful...
});
$(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"] input',function(event){
console.log("Clicked on a radio input");
event.stopImmediatePropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label>
<label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label>
The first problem is your label. You generally should either have your input inside the label OR use the for attribute. Your for attributes are for different controls than the ones inside the labels. I am not sure how browsers will handle this.
If you don't want clicks on the label to trigger an input, don't associate them at all. Consider not using a label at all, use a span instead.
If there is a condition that turns on/off whether the label affects a control, you can use code to set/clear the label's for attribute.

Toggle Javascript

Making a password generator website and I don't know how to allow people toggle checkboxes to choose a preference for their password.
I don't know how to allow people to toggle checkboxes more than once. I also would like to know how it to update automatically when someone checks the box.
<label class="input-toggle">
<input type="checkbox" id="checkbox1" checked>
<span></span>
</label>
I've been trying something like this:
$('#checkbox1').click(function() {
});
But I don't know how to make the characters longer or shorter as an option.
What I have so far: http://codepen.io/HaydnAnderson/pen/EKGxJP
Very simple question.
https://jsfiddle.net/41vuxh44/1/
window.passwordGen = {
preferences : {
uppercase : false,
numbers : false
}
};
$("#numbers").on('change', function(event)
{
window.passwordGen.preferences.numbers = $(this).prop('checked');
console.log(passwordGen);
});
In my example, I am binding a living change event to the #numbers checkbox. Using on is the new way of doing living event bindings.
When the checkbox is altered, it fires the event. I then update my global preferences object to be the value of the checked property, which is a boolean representing if the checkbox is clicked.
There's a lot more I could do with this to make my preferences object more robust. Perhaps you'd want to use the new HTML5 DOM storage to retain preferences, and then move this logic to a new global that fires also on page load. You could also conceivably move this to a general function that handles many different inputs being changed to keep code concise, but what I've given will do what you're asking for.

Setting and unsetting variables in JavaScript/jQuery

I have a series of check boxes, jquery menu, auto complete and input boxes. How would you go about setting a variable that will display in a div with the values of everything that is selected, checked or typed?
I have tried
str += data.id;
For example. Which works for everything involved, except when changing the selection it just adds on to the end.
$('#txtDesc').html( str );
Is what I'm using to place it into the div and using the on select option in jQuery menu to trigger it.
I'm using the
str += checkedValue;
When a checkbox is checked but run into the same problem.
I know what I want it to do but I lack the knowledge to do it or even to search for it because I don't think I'm calling it the right thing.
I'm adding a fiddle, however for some reason it isn't working at all in the fiddle.
http://jsfiddle.net/tjje63oh/2/
So basically here is what is supposed to happen.
You select a unit, it goes down into the div, then you select a reason, it goes after the unit, then you select a location which goes after the reason.
If you change a unit, it should remove the one you have and replace it with the new one, but still read in order: unit, reason, location
So to me it seems like you want to figure out values of things that have changed in the html and display them somewhere in a "dig" which I assume you meant to mean as "div".
You can do stuff like this and attache is a fiddle with other simple examples
HTML
<input type="text" value="0" />
JS
$( "input[type='text']" ).on( "keypress", addValueToStuff );
http://jsfiddle.net/h13nLr3v/

Radio button html missing checked attribute, though Firebug indicates it is checked

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"]')

jquery: when i click a div, give focus to a textbox

$('.my-button').click(function() {
$(".my-textbox").focus()
});
Before Jquery 1.4 this used to be the way to call focus to a textbox, now it doesn't work. When I click the button, I want to call focus to the textbox, what i mean by "focus", is that I want the textbox to act like it was just clicked on, so that the user will not have to click on the textbox.
.focus is supposed to do an auto click onto the textbox i want it to, why isn't it working now? it broke in Jquery 1.4. I just need to know how to do it.
It still works. See here.
reference: jQuery focus docs
As mentioned there, calling 'focus' on one element may trigger 'blur' on another - and so use 'focusin' instead.
Your code works fine for me. However, it looks like you're trying to create a clickable label for an input element. If that's the case, there's an existing element named <label> that will do the job for you, no JavaScript required:
<label for="myTextBox">I'm a label, click me</label>
<input type="text" id="myTextBox" />
Example: http://jsfiddle.net/pkk6y/
Those are class selectors not IDs - not sure if that's relevant, but they're inherently not unique - particularly in the focus function jquery may just plain refuse - try using IDs (and #mybutton, #mytextbox)
Update: The jQuery doc page points out issues with IE:
The focus event does not bubble in
Internet Explorer. Therefore, scripts
that rely on event delegation with the
focus event will not work consistently
across browsers.

Categories