We Keep Coding

Remove entire table row having checkbox which was unchecked , when user click on submit button

I have table with checkall/uncheckall check box functionality and table is having and some input fields like text boxes, dropdowns. User should select at least one checkbox for processing the data in the table. That is working fine. For example table is having 3 rows and user select any one checkbox and click on submit button then remaining two table rows should be removed and not being submitted. I tried with the below one .
$("input:not(:checked)").each(function () {
$('input:not(:checked)').closest('tr').remove();
});
But this one is removing entire table. So I need only those table rows which are unchecked should be removed. Any help would be greatly appreaciated.

Assuming you don't use <th></th>, your header row also got selected because that checkbox is also unchecked. May be that will be the reason all rows got deleted. Console input:not:(:checked) it . It will give clear idea.
Edit:
Then try this, may be this will work
$('#tableid').find('tr[input:not:(:checked)]').each(function()
{
$(this).remove();
}

It seems to be working fine for me: https://jsfiddle.net/r9zgvbqu/7/
Two comments, you are using the .each() function to do something for all elements selected by "input:not:(:checked)", but in that function selecting everything again. so you are just doing the same thing multiple times. You can skip that step, and also skip the .each()-$(this) combination that has been suggested, by straightup doing:
$("input:not(:checked)").closest('tr').remove();
This removes all the you want.
EDIT: Your problem is that you are selecting all non-checked inputs, including text inputs etc. You can specify the type of input you are selection: input[type=checkbox]:not(:checked)
In general, I would avoid selecting elements by their tag name. It's better to give the relevant checkboxes a class, and you can select them by class.
Here is a fixed version of your fiddle: https://jsfiddle.net/927sdh8n/
And here is a simpler and safer version using classes: https://jsfiddle.net/qz53wfxc/

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}

Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Refresh/Call PrototypeJs Event from jQuery

I have a Magento Website. I have two js files, one written in Prototype an one in jQuery.
I have two select elements, with about 10 options. From jQuery I'm changing the first select's attribute "selected" (an some more). In Prototype I have a class that creates dependencies between two select elements.
If I click on the first select element and choose an option with the mouse, on the second select element will appear only the options that are linked to the option I choosed in the first select element. This is allready done in prototype.
The idea is that I want to do the click/trigger automatically from jQuery. The first select change it's selected option. But the second select element display all the options (and should display only the options linked to the first select element).
On the Prototype file I have some Event Observers, and I guess that these observers are not triggered from jQuery:
var select_el = $('select_' + id);
...
Event.observe(select_el, 'change', this.update.bindAsEventListener(this));
Event.observe(select_el, 'swatches:change', this.update.bindAsEventListener(this));
...
update: function(event) { ...
So I need somehow to trigger these events from jQuery, or to set an autocheck in Prototype.
Please tell me what should I do.
I've read on stackoverflow that events from Prototype can't be triggered from jQuery. There should be a way to do that. I just haven't found it.
I've tried jQuery functions like:
jQuery("option[value='" + checkedId +"']").attr("selected","selected").parent().focus();
jQuery("option[value='" + checkedId +"']").parent().trigger("onchange");
jQuery("option[value='" + checkedId +"']").parent().trigger('change');
Where the "parent()" is the first select element. The first select element changes as I want, but the second select element should automatically change after the first select is changed. And this never happens. It works only if I click with the mouse on the select and choose manually an option. I want to do this from jQuery, without being necessary to manually click on the desired option.
Thanks for reading this, and now just give me a fix for this problem.
Regards.

Select element by dynamically changed attribute

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

Triggering multiple events based on change event of one element

I have multiple rows with three select elements each. There are two such rows during initialization and further rows can be added dynamically. I added change events to all these elements when each row is added such that all the other elements in a particular row change when one of the drop downs in that row is changed. There is also another select element #foo that is not a part of any row (it is displayed on top of the page) which on change should change the contents of all the select elements on all rows.
I tried doing this by adding jQuery("#foo select").change(callback_function) while adding the change events for each row. But when I do this, changing #foo updates only the last inserted row and not the other rows. How do I make it work in such a way that changing #foo updates all rows?
Any solutions will be greatly appreciated.

It would be easier to answer if you provided some source code, but from what I understand (When the select element with an id of foo is changed, the other select elements are changed by a certain function) this might work for you:
$("#foo").on('change', function() {
$('select.other-selects').each( function (i) {
callback_function();
});
});
Where .other-selects is the class you designete you others select elements with.