I have a checkbox and a select option on my page that displays data from my database.
I want a situation where when a user checks the checkbox,then the word “All” will be displayed in the select option and all data displayed on table. Then when a user selects any option from the drop-down,the checkbox should be unchecked and the corresponding rows of data displayed as selected by user.
I’m still learning my way through with JavaScript and jQuery. I know its solution lies there but I don’t know just how to get about it. Below is what I’ve tried following similar cases but it hasn’t solved my problem.
My html for the check box and select
<input type="checkbox" name="check" id="check" onchange="this.form.submit();"/>Show All
<select id="rowno" name="rowno" onchange="this.form.submit();">
<option value"10"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="10") echo "selected";?>>10</option>
<option value"20"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="20") echo "selected";?>>20</option>
<option value"30"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="30") echo "selected";?>>30</option>
<option value"40"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="40") echo "selected";?>>40</option>
</select>
Below is the jquery code:
<script type="text/javascript>
//js code to persist checkbox state using local storage
function onClickBox()
{
let checked = $("#check").is(":checked");
localStorage.setItem("checked", checked)
if($("#check").is(":checked"))
{
//code to re-populate select on checkbox checked
if(this.checked)
{
var select = $("#rowno");
select.empty();
var options = "";
options += "<option hidden>All</option>";
options += "<option value = '10' >10</option>";
options += "<option value = '20' >20</option>";
options += "<option value = '30' >30</option>";
options += "<option value = '40' >40</option>";
select.html(options);
}
else
{
var select = $("#rowno");
select.empty();
var options = "";
options += "<option value = '10' >10</option>";
options += "<option value = '20' >20</option>";
options += "<option value = '30' >30</option>";
options += "<option value = '40' >40</option>";
select.html(options);
}
return confirm('Are you sure you want to display all rows? For a large table, this might crash the browser.');
}
}
function onReady()
{
let checked = "true" == localStorage.getItem("checked");
$("#check").prop('checked', checked);
$("#check").click(onClickBox);
}
$(document).ready(onReady);
//code to uncheck checkbox when select option selected
$("#rowno").change(function()
{
let selected = $("#rowno").is(":selected");
localStorage.setItem("selected", selected);
select = localStorage.getItem("selected");
if(select)
{
$("#check").prop('checked', false);
}
});
</script>
Advertisement
Answer
Perhaps the following MIGHT help a little – though I notice you have added some Javascript which uses localStorage to maintain checkbox checked state seeminly which was not specified in the original code/question.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
</head>
<body>
<!-- the form should have a name for easy reference to it in javascript -->
<form method='post' name='geronimo'>
<input type='checkbox' name='check' value=1 />Show All
<select name='rowno'>
<option value='all' hidden disabled>All
<option value='10'>10
<option value='20'>20
<option value='30'>30
<option value='40'>40
</select>
<input type='submit' />
</form>
<?php
/*
This is ONLY to show what has been submitted
by the form - for reference only... though you
could query the database here.
*/
if( !empty( $_POST ) ){
printf('<pre>%s</pre>',print_r($_POST,true));
}
?>
<script>
<?php
/*
Using PHP to create a javascript variable that can be used to
add the `selected` attribte to the respective option is much
cleaner and easier than potentially hundreds of inline PHP echo
statements as per the original code. imho
*/
printf(" /* Dynamic variable from POSTed data - OR Zero! */
let rownum='%s';
nn", !empty( $_POST['rowno'] ) ? $_POST['rowno'] : 0 );
?>
let oForm=document.forms.geronimo;
let oSel=oForm.rowno;
let oChk=oForm.check;
// find all options and if the POSTed value matches - add the selected attribute
// establish initial display conditions following page load / form submission
if( rownum ){
if( rownum=='all' )oChk.checked=true;
Array.from( oSel.querySelectorAll('option') ).some(option=>{
if( rownum==Number( option.value ) || rownum=='all' ){
option.selected=true;
return true;
}
});
}
// listen for changes on the checkbox
oChk.addEventListener('click',function(e){
if( oSel.firstElementChild.value=='all' ){
oSel.firstElementChild.selected=this.checked;
oSel.firstElementChild.disabled=!this.checked;
}
});
oSel.addEventListener('change',function(e){
if( oChk.checked )oChk.checked=false;
alert(
'The checking/unchecking of elements and selection of the hidden "All" ' +
'option are done. What is NOT done is the selection of records from the database.nn' +
'Currently the approach seems to be using regular form submissions rather than AJAX,n'+
'which is why once this dialog closes the form will be submitted...nnGood luck.'
);
oForm.submit();
});
</script>
</body>
</html>
Notes on the identified portion of code
/*
OK - we have `rownum` which is created by PHP and is based upon
previous form submission ( in this version )
`rownum` will either be an integer (10,20,30..etc ) as it's value
comes from the dropdown or, if the checkbox is checked, the value
will be "all"
If the value is "all" we should ensure that the checkbox is ticked.
Array.from will, in this case, convert a `nodelist` into an array -
which we want to do if we want to use certain native array methods, such
as `forEach` or, in this case, `some`. There are others we could use -
Array.prototype.map for instance.
According to MDN:
"NodeList objects are collections of nodes, usually returned by properties
such as Node.childNodes and methods such as document.querySelectorAll()."
So - using `querySelectorAll` we return a `static nodelist` which we convert
to an array and then iterate through. The `some` method can be cancelled if
some logic test evaluates as true within the loop. This is useful as it means
we do not need to process ALL nodes/array items. The logic test used here
simply tests whether or not the current array item value( which is the option.value )
is the same as the rownum variable or "all" - if it is the logic test is true
so we can stop further processing and perform whatever operations we want to.
In this case we want to ensure that the respective option in the select menu is
set as "selected" and then we return true to cancel the `some` loop.
*/
if( rownum ){
if( rownum=='all' )oChk.checked=true;
Array.from( oSel.querySelectorAll('option') ).some(option=>{
if( rownum==Number( option.value ) || rownum=='all' ){
option.selected=true;
return true;
}
});
}