Javascript 如何取消选中选项选择上的复选框，然后从数据库中加载相应的数据，并保持复选框和选项选择状态
我的页面上有一个复选框和一个选择选项，用于显示数据库中的数据 我想要一种情况，当用户选中复选框时，选择选项中会显示单词“All”，表中会显示所有数据。然后，当用户从下拉列表中选择任何选项时，应取消选中该复选框，并将相应的数据行显示为用户所选 我仍然在学习如何使用JavaScript和jQuery。我知道它的解决方案就在那里，但我不知道该怎么做。下面是我在类似案例中尝试过的，但并没有解决我的问题 选中复选框并选择“我的html”Javascript 如何取消选中选项选择上的复选框，然后从数据库中加载相应的数据，并保持复选框和选项选择状态,javascript,php,html,jquery,Javascript,Php,Html,Jquery,我的页面上有一个复选框和一个选择选项，用于显示数据库中的数据 我想要一种情况，当用户选中复选框时，选择选项中会显示单词“All”，表中会显示所有数据。然后，当用户从下拉列表中选择任何选项时，应取消选中该复选框，并将相应的数据行显示为用户所选 我仍然在学习如何使用JavaScript和jQuery。我知道它的解决方案就在那里，但我不知道该怎么做。下面是我在类似案例中尝试过的，但并没有解决我的问题 选中复选框并选择“我的html” <input type="checkbox"
<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>
全部显示
>20
>40
<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>
也许下面的内容会有所帮助-尽管我注意到您添加了一些Javascript，它使用localStorage
来维护复选框选中状态，这在原始代码/问题中没有指定
<!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';
\n\n", !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.\n\n' +
'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...\n\nGood luck.'
);
oForm.submit();
});
</script>
</body>
</html>
我想要实现的是在选中复选框的选择选项中显示“全部”，然后从数据库中获取所有数据。但是，如果未选中该复选框，将显示默认选项并提取数据。此外，如果另一方面，当复选框仍处于选中状态并显示“全部”时，用户从下拉列表中选择一个选项，如“20”，则复选框将取消选中，“全部”将关闭，留下“选项10、20、30、，40和显示将只有20行或记录。我有php代码来获取数据，这些工作正常。你是否复制了上述内容并实际测试了它…？谢谢you@Professor阿布伦修斯。正是我要找的。我会在我的项目中处理它，效果很好
/*
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;
}
});
}