Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes
try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find
Related
So I spent many hours working on a dynamic Booking form. I manage to get the hide and show functions to work as I want and that the values change according to the chosen Radio button. For the next step I want to calculate the values. But I want to first display the Value of the Radio. Then when the user checks a checkbox, add the value of each checked checkbox to the value of the Radio. I managed to get the function of adding all checked boxes and add that to the radio value.
var sum1;
$('input[name=price]').change(function() {
sum1 = $('input[name=price]:checked').val();
});
$('input[name=custompak]').change(function() {
var sum2 = 0;
$('input[name=custompak]:checked').each(function() {
sum2 += parseInt($(this).prop('value'));
});
document.getElementById('finalprice').innerHTML = parseInt(sum1) + parseInt(sum2);
});
This is the JSFiddle of the Complete form:
https://jsfiddle.net/mullern/2cr91vvq/2/
FYI, the rest of the JS code changes the value depending on the Customertype selection and it also hides the checkboxes of the products already included in the bundle.
My goal is to Display the price of the Packages shown in the radiogroup when one is selected. Then when one or more checkboxes are selected, that value gets added to the value of the radiogroup selection.
On a sidenote I was also not able to figure out how to display the Value when the page is loaded so the user sees the default selection value when they open the contact form.
I hope this isn't to confusing and thank you in advance for any help on my problem.
Take a look at this [fiddle][1], Try clicking on radio button under packages. You are suppose to write code on click event. I also tried to minimize your code by calling method , check line 13 to 22.
[1]: https://jsfiddle.net/2cr91vvq/3/
So here's the code I'm using to make it so any checkbox of a certain class can only have one option selected among the others with the same class.
$(function() {
$(".single-checkbox1").on("click", function() {
$(".single-checkbox1").not(this).prop("checked", false);
});
});
Except, some of these checkboxes show objects when checked, like a text box or text area. The issue is that, unless you manually uncheck the box that shows the object before checking a different box, the object doesn't go away.
For example, if I checked box 1 to reveal textbox 1, then checked box 2 (the page then unchecks box 1 as only one box is allowed to be checked,) the textbox 1 will not disappear.
However, if I manually uncheck box 1 before checking box 2, textbox 1 WILL disappear. Has anyone encountered this error before?
Why don't you use radio buttons instead? Radio buttons in a group only allow one button to be checked at a time. You can do a change event or .each on the group and based on the checked property, you can hide or show the appropriate check boxes.
How do you show/hide the objects when a checkbox is (un)checked? Is it in another on click handler?
If so, I think $(".single-checkbox1").prop("checked", false) only unchecks the checkbox but doesn't call its handler (so the object will not show/hide). It may be better to do something like:
$(".single-checkbox1").on("click", function() {
$(".single-checkbox1:checked").not(this).click();
// If it's a different handler, do
// $(".single-checkbox1:checked").not(this).trigger('whateverHandler');
// If this doesn't uncheck the box then do this instead
// $(".single-checkbox1:checked").not(this).prop("checked", false).click();
});
Create a plunker or snippet if none of this helps and we can try other solutions.
I have an Ember.Select which I've extended in order to encapsulate the options & some logic when things change. What I'm trying to accomplish is to set the value (i.e. the selected index) of the Ember.Select when an event is triggered by the controller. I've created a jsbin here: http://emberjs.jsbin.com/avoXOnOd/5/edit
You'll notice that when you enter a number in the textbox (say 3 for example) and click on the button next to it, the console is displaying the correct value, but the selected index of the select does not change. What I'm after is to be able to change the selection when an event is triggered by the controller.
Have updated the bin to make it work. Link. Fore more information, refer to selection attribute in Ember.Select here.
I have reduced the number of options, and the selected option would be 1 plus the entered number. So input 0-3 in the text box to see it working
i'm creating a shopping list application via javascript/jquery and i'm having trouble using checkboxes to cross off items on the list. i'm getting close though. when a box is checked, all of the items in the list become crossed off, and also the text in the main text-input at the top of the application has the strikethrough quality as well. checking one of the boxes should only strikethrough the corresponding text next to it.
here is my javascript for this particular function:
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().siblings('input[type=text]');
$('input').css('textDecoration','line-through');
});
also here is a link for the current version of the application:
https://dl.dropboxusercontent.com/u/91499081/ShoppingList/shoppingList.html
Simple mistake - made it many times myself.
jsFiddle demo
You correctly identify the specific input tag that you want to underline, and you assign that tag to a variable.
But in your next jQuery line, you put the variable name as a string, which tells jQuery that you want to get all elements of that type. Since "input" is a valid type of elements, all input elements are modified.
Therefore, change:
$('input').css('textDecoration','line-through');
To:
$(input).css('textDecoration','line-through');
I would also recommend choosing a different var name. Had you used a different var name, such as "myInput", you may have found the solution yourself.
Per your comment question:
To check/uncheck the text field:
jsFiddle example
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().find('input[type=text]');
if ($(this).is(':checked') ) {
$(input).css('textDecoration','line-through');
}else{
$(input).css('textDecoration','none');
}
});
I think you're looking for:
$('#shopping-list').on('change','input[type=checkbox]',function(evt){
var checkbox = $(evt.target),
textInput = checkbox.next('input[type=text]');
textInput.css('text-decoration', checkbox.is(':checked') ? 'line-through' : 'none');
});
You were going up to the parent, then selecting all the input children that were text inputs, instead of only the text right after the check box.
Checking if the checkbox is checked will allow the line through to toggle as the user keeps clicking the box.
I have a list of radio buttons that I update programmatically based upon a user's selection from a different list. This code properly finds the radio button that matches the selected item and selects it, but it doesn't deselect the previously selected radio button.
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).prop("checked",true).checkboxradio('refresh');
}
});
All of the radio buttons in the major_groups div have the same name, so I thought selecting one would unselect the others. I got it to work by looping through the buttons again and refreshing all of them, but this seems inefficient.
Also, will .prop("checked",true) fire the change event?
What about just triggering a click event on the radio button, something like this:
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).click();
}
});
Your each loop will only call refresh on the radio with specific value, and will not be called on others in the same group. The actual inputs of the group will be automatically unchecked but your plugin won't recognize the ones that are deselected unless you refresh them too.
Try this:
var $radios=$('#major_groups input[type=radio]');
/* first check the appropriate radio*/
var $radioToUpate=$radios.filter(function(){
return this.value=group_name;
}).prop("checked",true);
/* then refresh all radios with same name*/
$radios.filter('[name="'+ $radioToUpate.attr('name') +'"]').checkboxradio('refresh');
A link to the plugin docs might be helpful to see if plugin has methods to handle the property change that might take care of the whole group