如何使用Ajax和jquery通过checkbox过滤Json对象？
使用Ajax和jQuery通过checkbox过滤JSON对象的方法如下：
- 首先，确保你已经引入了jQuery库。
- 创建一个HTML页面，包含一个包含checkbox的表单和一个用于显示过滤结果的容器。
<!DOCTYPE html>
<html>
<head>
<title>Checkbox过滤JSON对象</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="filterForm">
<label><input type="checkbox" name="filter" value="option1">选项1</label>
<label><input type="checkbox" name="filter" value="option2">选项2</label>
<label><input type="checkbox" name="filter" value="option3">选项3</label>
</form>
<div id="resultContainer"></div>
<script>
$(document).ready(function() {
// 监听checkbox的变化事件
$('input[name="filter"]').change(function() {
// 获取选中的checkbox值
var selectedFilters = [];
$('input[name="filter"]:checked').each(function() {
selectedFilters.push($(this).val());
});
// 发送Ajax请求
$.ajax({
url: 'filter.php', // 替换为你的服务器端处理脚本
type: 'POST',
data: { filters: selectedFilters }, // 将选中的checkbox值作为参数传递给服务器端
dataType: 'json',
success: function(response) {
// 清空结果容器
$('#resultContainer').empty();
// 显示过滤结果
$.each(response, function(index, item) {
$('#resultContainer').append('<p>' + item.name + '</p>');
});
},
error: function() {
alert('请求失败，请重试！');
}
});
});
});
</script>
</body>
</html>- 创建一个服务器端处理脚本（例如filter.php），用于接收并处理Ajax请求。
<?php
// 获取传递的参数
$selectedFilters = $_POST['filters'];
// 假设这是你的JSON对象
$jsonData = '[
{ "name": "项目1", "option": "option1" },
{ "name": "项目2", "option": "option2" },
{ "name": "项目3", "option": "option3" },
{ "name": "项目4", "option": "option1" },
{ "name": "项目5", "option": "option2" }
]';
// 解析JSON对象
$data = json_decode($jsonData, true);
// 过滤JSON对象
$result = array_filter($data, function($item) use ($selectedFilters) {
return in_array($item['option'], $selectedFilters);
});
// 返回过滤结果
echo json_encode($result);
?>以上代码演示了如何使用Ajax和jQuery通过checkbox过滤JSON对象。当用户勾选或取消勾选checkbox时，会发送Ajax请求到服务器端处理脚本，服务器端根据选中的checkbox值过滤JSON对象，并将过滤结果返回给前端页面，最后前端页面将结果显示在指定的容器中。
推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云云函数（https://cloud.tencent.com/product/scf）。
相关·内容
3回答
我需要使用Jquery和AJAX来访问具有以下关联数组的API - {"1":"alamiz builder","2":"souroy builder","3":"vin selv builder","4":"gol mat builder","5":"sm dev builder","6":"zahi builder"}* 因为这个数组以数字作为键，所以我很难在表单元素中显示每个值。 我尝试过使用$(
浏览 19提问于2019-05-09得票数 1
回答已采纳
我试图从中获取JSON响应中的一些条目，方法是使用jQuery和ajax()方法选择复选框。
我可以通过Chrome DevTools看到两个请求，一个是“文档”类型，另一个是"XHR“类型。对于前者，响应是正确的，而对于第二个，则没有响应。这就是他们的样子：
具有查询字符串参数的请求URL：：userId[]：3 userId[]：4
具有查询字符串参数的请求URL：：userId: 3 userId: 4
这就是我的HTML、JavaScript和jQuery的样子：
<form id="myForm" action="https://jsonpla
浏览 1提问于2018-08-16得票数 0
4回答
我试图将任何复选框的值添加到输入文本字段中。这是我的小提琴：
$(document).ready(function() {
$(":checkbox").on('click', function() {
if ($(':checkbox:checked')) {
var fields = $(":checkbox").val();
jQuery.each(fields, function(i, field) {
$('#field_results').val(
浏览 0提问于2014-04-08得票数 1
回答已采纳
3回答
在我的博客存档页面上，我正在尝试创建一个带有复选框的类别过滤器，这样访问者就可以按类别过滤帖子，而不需要重新加载页面。但我遇到了如何隐藏未选中类别的项目的问题。 我写了一段代码，但真的不知道如何更进一步。 $('.category-filter input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
var categoryName = $(this).attr("name");
if ($("artic
浏览 21提问于2019-05-15得票数 0
1回答
我刚开始使用jquery，我正在尝试使用Jquery创建一个自动完成的程序，我还在学习，所以我确信我的代码会更好，但这只是一个开始。当jquery将引号放在json键上时，我遇到了一个问题。我看了一下堆栈溢出，我似乎找不到解决方案，所以我觉得值得问一问，因为我很好，而且确实很笨，我认为我的php一定有什么问题。
{"value":"Managerial Accountants","id":"5929"}
我要我的输出像这样出来“
{value:"Managerial Accountants",id:"592
浏览 2提问于2014-01-26得票数 0
回答已采纳
我正在学习网页开发，我已经创建了一些复选框。目前我有四个复选框。我想发送我的"REST服务“所有的checkboxesID，由用户检查。下面是我尝试过的。
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" id = "1" name="graphId" value="1">Graph1<br>
<input type="checkbox" id = "
浏览 1提问于2016-06-23得票数 0
回答已采纳
我有一些json可以回电。问题是，现在我可以在localStorage中设置ID了，我需要填充该记录，而且只需要填充该记录。
所以我的localStorage看起来是：
这是从我的json和设置后，按一下按钮。现在，我需要使用那个ID来获取相关的json。这是我的json，但我不知道如何修改ajax调用，以便只使用ID返回记录。如果能帮上忙就太好了。
我的ajax调用：
var recID = localStorage.getItem('recordID');
var Json_return = [];
jQuery(function(){
jQ
浏览 1提问于2014-05-21得票数 0
回答已采纳
这是我的index.php
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Cassette Decks</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<script src="https://ajax.goo
浏览 3提问于2022-01-26得票数 0
3回答
页刷新后保留复选框。
、、、
我有几个复选框，需要在页面刷新后保持选中。但它们或需要在刷新后检查以保持检查，如果只有少数被选中，则在刷新后不进行检查。
我该怎么解决这个问题呢？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Persist checkboxes 1</title>
</head>
<body>
<input type="checkbox" class="
浏览 1提问于2016-02-19得票数 0
回答已采纳
例如，我有3个复选框：
<input type="checkbox" name="filter[]" value="1">
<input type="checkbox" name="filter[]" value="2">
<input type="checkbox" name="filter[]" value="3">
我使用PHP发送一些json，如下所示：
{'name': 'John
浏览 1提问于2012-08-28得票数 0
我使用jquery ajax将表单内容发布到服务器，如下所示：
$.ajax({
type: type,
dataType: "json",
url: url,
data: form.serialize(),
success: onSuccess
});
我必须发送一个数据数组，就好像它来自checkbox。
我不想动态创建一个隐藏的复选框，并在提交前将其附加到表单中。我在表单jquery api中看不到任何其他方法可以帮助我。有什么帮助吗？
谢谢，克里斯。
浏览 4提问于2011-10-31得票数 0
1回答
我正在调用一些将自己附加到DOM ready上的元素的jQuery插件。这些插件在发生某些事件(单击、更改等)时操作DOM
$("body").find("input[type='checkbox']").checkbox();
上面的代码在DOM ready上运行良好。然而，如果我从一个AJAX调用加载一些超文本标记语言，我必须使用.on()来保证事件被一致地绑定。
问题是我应该将插件绑定到哪个事件？我已经在下面尝试过了，但似乎没有反应。
$("body").on("load", "input[typ
浏览 4提问于2014-06-09得票数 0
我的Razor视图中有两个数组。第一个为选中复选框，第二个为未选中。我可以发送其中的一个，但是我不知道如何发送两个。这是我的jQuery代码：
$(document).ready(function() {
$("#checkAll").click(function() {
$(".checkBox").prop('checked', $(this).prop('checked'));
});
$("#confrim").click(function() {
v
浏览 21提问于2016-07-19得票数 1
回答已采纳
我有以下可用的代码：
jQuery.ajax({
type: 'post',
url: 'http://www.someurl.com/callback.php',
dataType: 'json',
data: jQuery(':input[name^="option"][type=\'checkbox\']:checked, :input[name^="option"][type=\'text\']'),
complete
浏览 0提问于2013-12-03得票数 0
我有两个从两个不同的json对象创建的列表：
<ul ng-repeat="a in user.data">
<li>
<md-checkbox>
{{ a.name }}
</md-checkbox>
</li>
</ul>
以及：
<ul ng-repeat="x in job.data">
<li>
<md-checkbox>
浏览 12提问于2016-03-23得票数 0
回答已采纳
1回答
大家好，我是ajax面临的一个问题，我想把这个数据显示为html中的一个表，如何提取这些数据并以html表格的形式显示，它只是一个虚拟数据，否则它有很多对象和嵌套对象，请帮助我。
JSON数据：
{
"FullName":"shahrushabh",
"description":"this is demo person register",
"Address1":"b\/1",
"Area":"Sabarmati",
浏览 7提问于2016-09-25得票数 2
回答已采纳
我正在$.ajax上创建一个动态的$.ajax列表：
function load() {
$.ajax({
type: "POST",
url: "*************",
data: "************",
dataType: "json",
contentType: "application/json; charset=utf-8",
e
浏览 1提问于2013-01-30得票数 1
回答已采纳
1回答
检查HTML表单的响应数
、、、
因此，我需要验证课程是否有标题以及是否选中了3个SLO。我在Javascript中有一个代码片段，可以确保我的代码不超过3个，但是我如何确保我有3个，并且课程描述中有信息。
here is my code:
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
fun
浏览 0提问于2019-12-03得票数 0
1回答
我有一个多语种的网站，在那里我应该显示一个成功的信息后，成功提交。我使用ACF和wp_send_json_success ()报告一个成功的发送，但是我在控制台中得到了一个错误。这封信发得很成功。我怎样才能正确地做这件事，这样我才能发出成功的信息？
PHP:
add_action('wp_ajax_nopriv_send_email', 'send_email');
add_action('wp_ajax_send_email', 'send_email');
function send_email() {
$check
浏览 0提问于2019-12-09得票数 0
2回答
我有一个像这样的html
<input type="checkbox" class="pushchecks" value="JAN" >
<input type="checkbox" class="pushchecks" value="FEB" >
<input type="checkbox" class="pushchecks" value="MAR" >
我需要获得选中的复选框值，并通过JSON格式传递到另一个页
浏览 0提问于2017-06-12得票数 3
朋友们，我对jquery和prototype有一个问题：
<head>
<link rel="stylesheet" type="text/css" href="http://localhost/ecommerce/css/lightview.css" />
<script type="text/javascript" src="http://localhost/ecommerce/js/jquery-1.3.2.min.js" ></script&g
浏览 1提问于2010-01-08得票数 1
我正在使用YII和我有一个复选框过滤器，按品牌过滤产品。
这是我的过滤器HTML：
<dl class="brand-filter">
<dd class="cat-text">
<input value="1" id="chb_1" class="brand-filter-chb" type="checkbox" name="brands[]">
<label for=&
浏览 1提问于2012-12-04得票数 0
2回答
我在这个网站上看了很多帖子，但还是不能让我的代码工作。
我想要得到我的复选框值的php数组。
下面是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<title>Untitled Document</title>
&l
浏览 0提问于2017-04-14得票数 0
2回答
我已经建立了一个有122个标记的谷歌地图，多个类别(12)。我可以根据每个标记使用的图像创建过滤器，以便从表单打开/关闭标记吗？将另一个变量定义为“类别”变量是否更好？如果我使用JQuery，我如何重构代码以使其正常工作？
任何想法都将不胜感激。
JScript看起来像这样：
function initialize() {
var myOptions = {
center: new google.maps.LatLng(,),
zoom: 12,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map =
浏览 3提问于2013-06-20得票数 2
回答已采纳
我有Jquery登录控件loke的代码，下面使用它到asp.net中，但是我不明白在哪里以及如何简单地验证用户名和密码。
Login.aspx
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<scr
浏览 1提问于2012-10-29得票数 0
回答已采纳
已修复将数组checkbox_values放入请求中的问题。Tnx为您的时间和帮助的家伙！
var checkbox_values = new Array();
var subscriber_id = jQuery('#subscriber_id').prop('value');
var subscriber_name = jQuery('#subscriber_name').val();
var subscriber_mail = jQuery('#subscriber_m
浏览 2提问于2013-06-19得票数 0
我需要使用jQuery grep.My过滤JSON结果，如下所示：
var data = { "items":[
{
"Name": "Name 1",
"City": "city1"
},
{
"Name": "Name 2",
"City": "city2"
},
{
"Name&#
浏览 2提问于2016-05-09得票数 2
回答已采纳
4回答
下面是我的html标记。我想从jQuery中的以下标记中获取ID。请建议我如何实现这一点。
<input type="checkbox" id="HOWARD" onchange="checkIfCheckAll()" class="checkBoxClass">
下面是我用来遍历表和获取checkbox的id的代码
$("#tblSearch tr:gt(0)").each(function () {
debugger;
var this
浏览 1提问于2017-01-18得票数 0
我将在html输入字段中使用PHP设置一个数组，并最终将该数组发送到jquery函数。
这是不起作用的，所以我接着使用json_encode并以这种方式发送它。但是，由于我是在html字段(name)中设置它，所以它不会因为字符而呈现。然后我使用htmlspecialchars让它工作。
//html php
<input type="checkbox" name="<?php echo htmlspecialchars(json_encode($row)); ?>" />
//jquery
var arr = $('#some
浏览 4提问于2014-09-11得票数 2
回答已采纳
1回答
在表格中有过滤器。基于单击按钮，我进行了ajax调用。
$.getJSON('<?php echo $this->Html->url(array('controller'=>'buying', 'action'=>'purchase_orders')); ?>/'+warehouse_id+'/'+status+'/'+start_date+'/'+end_date+'/'+supplier_id,
浏览 2提问于2013-06-19得票数 2
asp.net项目的母版页面使用jQuery1.10.2和jQuery-UI1.10.1。我试图使用jQuery1.12.4和jQuery1.12.1来使用'checkboxradio‘特性。
我现在有这个，是从找到的，但是当我得到它的时候，它似乎还没有正常工作
未发现错误:没有为校验盒无线电小部件找到标签.
在标题中(在身体之后也尝试过了)
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jqu
浏览 5提问于2016-12-29得票数 0
1回答
var formRenderData = [{
"type": "checkbox-group",
"label": "Checkbox Group",
"className": "checkbox-group",
"name": "checkbox-group-1479370460494",
"values": [{
"label": "Option 1",
"value&#
浏览 3提问于2016-12-07得票数 1
回答已采纳
1回答
我是Drupal的新手，我尝试创建一个带有许多筛选器选项的视图，因为它有很多过滤器字段，我希望它们被隐藏，并且只显示用户在给定时间决定要查看的筛选字段。
我可以找到一个模块来获得上述的影响，所以我尝试使用面板并添加自己的html和jQuery自定义代码：
<input type="button" id="filter-selection-toggle-button" value="show filters"/>
<div id="my-filter-selection">
<input ty
浏览 3提问于2015-02-03得票数 0
我的页面上有几个复选框。我已经准备好了一些jquery，以确保一次只选中一个复选框。我已经为每个复选框指定了一个特定值。下面的ajax查找选中的复选框，并获取与其相关的值。如何将该值传递给我的操作？
阿贾克斯
$("input:checkbox").click(function () {
var PaymentID = document.querySelector('#chkBox:checked').value;
alert(PaymentID); // for test
浏览 1提问于2016-09-14得票数 0
回答已采纳
所有这些都是问题所在，我想在客户端禁用并启用一个rich:calendar (例如使用javascript字体)。
xhtml元素：
<rich:calendar id="calendar" ... />
<h:selectBooleanCheckbox id="checkbox" onclick="change('checkbox', 'calendar')" ... />
JS职能：
function change(checkbox, calendar){
i
浏览 3提问于2011-11-04得票数 1
回答已采纳
我正在尝试使用相同的json响应追加多个div，如何对ajax的响应进行分类？
我想将get_template_part('template-parts/content-search')的响应附加到#result_data
我想添加另一个div #filter，它的值存储在$test变量中。
filter.js
jQuery(document).ready(function(){
jQuery('.category_checkbox, .services_checkbox, .industry_checkbox').click(function(){
浏览 3提问于2022-09-08得票数 0
实际上，我阅读了许多关于数组和jquery的主题，它们都展示了在hmtl脚本标记中使用jquery的示例，但我试图学习的是如何在js文件中读取php通过ajax发送的数组。
下面是我的php示例
$record = array('jazz','rock', 'punk', 'soft', 'metal');
echo json_encode($record);
下面是我的ajax
$.ajax({
url: "system/music_list.php",
dataType:
浏览 9提问于2016-02-15得票数 4
回答已采纳
1回答
如果选中复选框，则应选中“重新加载后”复选框，如果未选中，则应取消选中。
在指令控制器.中的应用
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $("#checkbox-container :checkbox");
$checkboxes.on("change", function(){
$checkboxes.each(function(){
checkboxValues[this.i
浏览 1提问于2017-07-25得票数 0
3回答
我正在编写一个表单，在重新加载时必须保存并显示标记的复选框，我编写了可以将其保存到本地存储中的代码，但现在我不知道如何从本地存储中获取复选框的id，以便在重新加载页面时再次对其进行检查。
这是一个
守则：
// this code saves the marked checkbox in the local storage
$('.required-option').on('click', function() {
var fav, favs = [];
$('.required-option').each(function() {
浏览 4提问于2016-09-22得票数 0
回答已采纳
2回答
我在html表单中有多个复选框，当选中或未选中html表单中的任何复选框时，我需要获得对象数组，也就是说，当进行更改时，它必须返回对象数组。
我更喜欢使用$.map
期望值是
{"A"："dataA"}，{"B"："dataB"}当选中A和B时{"A"："dataA"}，而只有A被选中等等
我试过了
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/aja
浏览 4提问于2022-01-24得票数 0
回答已采纳
在尝试为我的站点找到一种选择多个按钮的方法后，我发现jquery 1.8文件就能做到这一点。作为编程和学习python和django的新手，我还没有深入研究javascript的世界。但是到目前为止，我得到的是，你可以将这些jquery文件合并到你的html中，而不需要在服务器端做任何事情。毕竟，在这种情况下，我只是想让我的按钮做一些事情。
现在，当我双击html文件时，jquery脚本可以工作，但当我通过我的应用程序运行html文件时，它就不起作用了。因此，它让我相信，当运行我的应用程序时，我必须在服务器端做一些事情才能让它工作。
这有意义吗？
有问题的Html代码，我没有在视图文件中修饰任
浏览 0提问于2011-10-10得票数 0
回答已采纳
我使用jquery发送包含如下元素数组的json数据
$('#brand_category').click(function(event){
category = $("input:checkbox[name=category]:checked").map(function() {
return this.value;
}).get();
brand = $("input[type='radio']:checked").map(function() {
浏览 0提问于2016-02-24得票数 2
回答已采纳
1回答
我使用bootstrap和jquery制作了一个很好的小移动应用程序，它从URL中提取一组对象并创建它们的表。现在我有大约5个要用来过滤JSON数据的控件(按钮组和下拉列表)。我的问题是我应该使用ajax吗？我想让过滤器在任何控件发生更改时不刷新页面。我使用ajax已经有很多年了(早在我用.NET开发的时候)，但我知道它是内置在jquery中的。下面是我的jquery函数，它构建我的对象表：
$(document).ready(function () {
var url = "http://json.url/";
$.getJSON(url,
浏览 1提问于2014-11-05得票数 0
如何创建多个复选框()，根据使用JavaScript?的选择，在浏览器刷新时保留复选框或未选中复选框，我知道如何做一个复选框，但当我尝试添加另一个复选框时，初始复选框将不记得刷新时是否选中了复选框(如果这有意义的话)。请帮帮忙。这是我的密码：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wra
浏览 3提问于2021-03-17得票数 0
1回答
如何捕获复选框输入
、、、、
我正在学习网络开发，我遇到了一个问题。我的表单中有四个复选框，我需要捕获复选框的状态。另外，我需要将复选框id发送到REST Service，在那里，我需要对每个复选框执行不同的操作。
下面是我迄今为止所做的事情。
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1">
浏览 1提问于2016-06-27得票数 1
回答已采纳
我对整个JSON和JQuery的事情都很陌生，我正在尝试阅读来自Delphi datasnap的JSON结构，例如：
{"result":[[{"type":"VOMesas.TMesas","id":1,"fields":{ "FUsers":1,"FEnclosing":0,"FClientName":"","FCode":100,"FStatus":1,"FTotalValue":128.25}}]
浏览 0提问于2012-02-07得票数 0
回答已采纳
5回答
我正在创建一个动态ul，并试图只获取特定ul的复选框。
$(document).on("click", "input:checkbox[name=filter]:checked", function() {
var flags = Array();
$("input:checkbox[name=filter]:checked").each(function() {
flags.push($(this).val());
});
});
<script src="https://ajax.googleapis.c
浏览 6提问于2017-05-02得票数 5
回答已采纳
5回答
如果一般使用Django框架或Python，有没有办法将JSON对象传递到web模板的前端？
例如，如果我想发送一个具有两个数组作为属性的对象(假设是xvalues和yvalues)，我如何能够使用JavaScript或jQuery执行Ajax调用来获得具有这两个属性的对象？
浏览 0提问于2011-08-11得票数 5
回答已采纳
1回答
我有@model IEnumerable<HotelWithRating> -一些酒店。在视图中，我有5个复选框-酒店的星级。
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td&
浏览 2提问于2013-05-28得票数 0
1回答
如何在追加表行时调用ajax？
、、、、
我有一个只有一行的静态表格，并且有一个用于添加和possible.But一样多的行的按钮，问题出在静态行中，我可以通过使用div id很容易地调用ajax函数，但是我不能在附加的行中调用ajax。我该如何解决这个问题呢？以下是将行追加到表中的代码
jQuery(function(){
var counter = 1;
var count = 0;
jQuery('a.add-row').click(function(event){
event.preventDefault();
co
浏览 0提问于2016-04-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
