We Keep Coding

Add Dynamic Action(Javascript Event) to the first checkbox (Oracle Apex)

I would like to ask for help with regards to working with the checkbox item in oracle apex. My problem is that I cannot add a javascript event or dynamic action to the first checkbox for the purpose of toggling a check all event.
I have tried accessing the auto-generated id ex. P100_SAMPLE_CHECKBOX_0 and put it on jquery selector in dynamic action property but somehow still does not work.
Goal: Using jquery / javascript code to toggle check all when the first checkbox is clicked.
Further Explanation:
So as you can see on the top image I have a checkbox item which composed of year from 2016 to 2020. So let's assume that there was already an "All" checkbox on top of 2016. So what I wanted to do is upon clicking the first checkbox (which is "All") all the checkbox from 2016 up to the end will automatically be checked/unchecked.

Take note of the DA scope, it should be dynamic, otherwise partial page refreshes will stop your DA from working as expected.
There is also a :first selector, which will deliver the first component within a set.
Today I also modified the header of a column in a report to select/select all items, and controlled it that way.

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 do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.

You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work

I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

How do I combine check all script and filtering?

I am new to JavaScript and jQuery, but have used HTML and CSS before. In any case, I appreciate the help. I have implemented the script discussed here http://net.tutsplus.com/tutorials/javascript-ajax/using-jquery-to-manipulate-and-filter-data/ for filtering data and the one discussed here http://www.dustindiaz.com/check-one-check-all-javascript/ for a check one to check all script. The problem is, when I filter the list of items and then use the check all box, it is checking even the JS items that are hidden from the user due to filtering. Does this make sense?
I have been trying to figure out how to edit the check all script so that only items with the "visible" class (as added to visible checkboxes with the filtering script) are checked with the checkAll button. The original script had:
var checks = document.getElementsByName('del[]');
I was trying to do something like this (it wasn't working, of course):
var visiblechecks = $('input:del[]:checked.visible');
among other things.
Thank you! Also, if you have a recommended resource, I would appreciate it.

var visiblechecks = $('input[name="del[]"]:checked:visible');

Your selector just needs a bit of refinement. Try:
$(".myCheckAllSelector").change(function () {
$("input[name='del[]']:visible").attr("checked", $(this).is(":checked"));
});
This should set the checked attribute of all currently visible checkboxes with the name del[] to the checked status of the check all box. You simply need to update the check all selector appropriately to target your master checkbox element.
You don't necessarily "need" to add a visible class as there is a :visible filter you can use to make that determination for you. However, just change your selector from input to input.visible if you still wish to use the class and remove the :visible filter..

chkControl.form element is null in mozilla why?

I am using ajax to populate the multilevel checkboxes dynamically depending on the users selections. Like choosing one or more options from first checkbox group will update new checkbox list and so on. I am adding the checkboxes to div. All the checkboxes are arranged using the table structure inside the form element.
Now to access checkbox as a group i take the checkbox controls on checkbox click using function selectElement(this) using which i get the checkbox and using which i retrive the Form control. However in Mozilla the chkControl.form is coming null and after trying to find solution i failed to find why ? can nesting form element wrongly in table structure cause such an issue ?
function selectElement(chkControl)
{
var frm = chkControl.form; //this in mozilla is returning null
//frm processing code
}