jquery 相关问题

JQuery 弹出窗口重置

抱歉，我对 Javascript 很绝望。我有一个脚本，显示一个弹出窗口，然后淡出。但我无法让它重置。目前的代码只能运行一次。 函数 myFunction$user...

JQuery 弹出窗口重置

抱歉，我对 Javascript 很绝望。我有一个脚本，显示一个弹出窗口，然后淡出。但我无法让它重置。目前的代码只能运行一次。 函数 myFunction$user...

如果视频在视口中/不在视口中，则自动播放/暂停视频

如果视频在视口中/不在视口中，我需要播放/暂停视频。 到目前为止它有效。问题是，如果用户按下暂停，视频就会再次开始播放。 // 限制...

当我使用 jquery 加载 PartialView html 时，使用 0 值 id 参数调用我未调用的控制器

我有这个View Edit.cshtml @model 产品视图模型 @{ 布局=“_Layout”； } 我有这个View Edit.cshtml @model ProdutoViewModel @{ Layout = "_Layout"; } <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="position-static my-5"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a asp-action="Index" asp-controller="Home">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Editar</li> </ol> </nav> <form enctype="multipart/form-data" class="mt-5" id="form-produto" asp-action="Edit" method="post" asp-controller="Produto"> <input hidden value="@Model.Id" name="id"/> <div class="row flex-md-row flex-sm-column"> <div class="col-md-2"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Informações</button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Imagens</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Relacionados</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> </div> <div class="tab-content col-md-10" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <div class="container row"> @{ if (Model.Imagens.Where(img => img.Perfil).Count() > 0) { var perfil = Model.Imagens.Where(img => img.Perfil).First(); <div class="col-md-5 col-sm-12 img-container border border-2 rounded-4"> <div id="header-profile" class="row justify-content-end"> <a id="btn-profile" data-img-id="@perfil.Id" class="btn btn-close p-3"></a> </div> <img id="img-profile" class="p-3 card-img image" src="~/images/@(perfil.NomeArquivo+"."[email protected])" /> <div id="input-container" style="display:none"> <div class="input-group mb-3 mt-2"> <label class="btn btn-success custom-file-upload input-group-text w-100 justify-content-center d-flex" for="inputGroupFile01"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> </div> } else { <div class="col-md-5 col-sm-12 img-container"> <img id="img-profile" class="p-3 img-thumbnail image" src="~/images/img-icon.png" /> <div class=""> <div class="text">Hello World</div> </div> <div class="input-group mb-3"> <label class="input-group-text" for="inputGroupFile01">Upload</label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> } } <div class="col justify-content-between pt-4"> <lable asp-for="Nome">Nome</lable> <input class="form-control" type="text" asp-for="Nome" /> <lable asp-for="Descricao">Descrição</lable> <textarea class="form-control h-auto" asp-for="Descricao"></textarea> <div class="col row d-flex"> <div class="col"> <lable asp-for="Preco">Preço</lable> <input class="form-control" type="text" asp-for="Preco" /> </div> <div class="col"> <lable>Categoria</lable> <select asp-for=IdCategoria class="form-select"> @foreach (var categoria in ViewBag.Categorias) { <option value="@categoria.Id"> @categoria.Nome </option> } </select> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <div class="mt-2 container row"> <div id="gallery-container" class="row row-cols-1 row-cols-md-5 g-4 mx-auto"> @{ int id = 1; if (Model.Imagens.Where(img => !img.Perfil).Count() == 0) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } foreach (var imagem in Model.Imagens.Where(img => !img.Perfil)) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> <a id="btn-@id" data-img-id="@imagem.Id" class="btn btn-close p-3"></a> </div> <div class=""> <img id="img-@id" src="~/images/@(imagem.NomeArquivo + "." + imagem.Extensao)" class="img-gallery card-img mb-2" alt="..."> </div> </div> ++id; if (id == Model.Imagens.Where(img => !img.Perfil).Count() + 1) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } } } </div> </div> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <input class="form-control" id="input-text-produto"/> <div id="card-produto-container"> </div> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div> <button type="submit" class="btn btn-success float" id="save-button"> <i class="bi bi-floppy"></i></button> <div class="fixed-bottom row d-flex justify-content-end"> </div> </form> @section Scripts { <script> $(document).ready(function () { $('#inputGroupFile01').change(function () { var input = this; //console.log(input) if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-profile').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }); let idStart = @Model.Imagens.Count() == 0 ? 1 : @Model.Imagens.Count() let args = { input: 'input-'+idStart, img: 'img-'+idStart, card: 'card-'+idStart, header: 'header-'+idStart, label: 'label-'+idStart, line: 'line-'+idStart } function initGallery(args) { setEvents(args) } function setCloseEvents(idLimit) { for (let i = 1; i <= idLimit; ++i) { let btn = $('#btn-' + i) btn.click(function () { let card = $('#card-'+i) console.log(i) imgId = btn.data('img-id') $('#gallery-container').append(`<input hidden name="imgsDeletadas" value="${imgId}"/>`) card.remove() }) } } function setCloseEventProfile() { let btn = $('#btn-profile').click(function () { let img = $('#img-profile').attr('src', '/images/img-icon.png') let imgId = btn.data('img-id') var headerProfile = $('#header-profile') let inputContainer = $('#input-container') inputContainer.show() headerProfile.hide() $('#gallery-container').append(`<input hidden name ="imgsDeletadas" value ="${imgId}" />`) }) } $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) }) let limit = idStart - 1 setCloseEvents(limit) setCloseEventProfile() initGallery(args) }) </script> } 我的问题是：当我调用以下ajax请求并将结果加载到div中时（如果我只在控制台中打印内容，则不会发生任何错误），我的控制器中的方法Edit被调用，ID为0，该方法不存在，并返回错误，因为控制器在 db 中找不到 0 id。 $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) 这是我的部分视图： @model CardResponse<ProdutoViewModel> <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> @foreach(var produto in Model.Result) { <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">@produto.Nome</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> } </div> </div> 这是我的控制器： using Microsoft.AspNetCore.Mvc; using kssgrafica.Data; using kssgrafica.Models; using kssgrafica.Models.ViewModels; using ImageMagick; using kssgrafica.Services; using kssgrafica.Services.ImageHandler; using kssgrafica.Services.ImageHandler.Dtos; using Microsoft.EntityFrameworkCore; using AutoMapper; using kssgrafica.Models.AuxiliaryModels; using kssgrafica.Extensions; namespace kssgrafica.Controllers { public class ProdutoController(ApplicationDbContext context, IImageHandler _imageHandler, IMapper mapper) : Controller { private readonly ApplicationDbContext _context = context; private readonly IMapper _mapper = mapper; private string DefaultPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images"); public IActionResult Index() { var produtos = _context.Produtos.Include(p => p.Categoria).Include(p => p.Imagens).ToList(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); return View(produtosViewModel); } public async Task<IActionResult> LoadTable(DtParameters dtParameters) { var searchBy = dtParameters.Search?.Value; // if we have an empty search then just order the results by Id ascending var orderCriteria = "Id"; var orderAscendingDirection = true; if (dtParameters.Order != null) { // in this example we just default sort on the 1st column orderCriteria = dtParameters.Columns[dtParameters.Order[0].Column].Data; orderAscendingDirection = dtParameters.Order[0].Dir.ToString().ToLower() == "asc"; } var produtos = await _context.Produtos.ToListAsync(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); var result = produtosViewModel.AsQueryable(); if (!string.IsNullOrEmpty(searchBy)) { result = result.Where(r => r.Nome != null && r.Nome.ToUpper().Contains(searchBy.ToUpper()) || r.Descricao != null && r.Descricao.ToUpper().Contains(searchBy.ToUpper()) || r.Preco != null && r.Preco.ToString().ToUpper().Contains(searchBy.ToUpper()) || r.Id != null && r.Id.ToString() == searchBy.ToUpper()); } result = orderAscendingDirection ? result.OrderByDynamic(orderCriteria, DtOrderDir.Asc) : result.OrderByDynamic(orderCriteria, DtOrderDir.Desc); // now just get the count of items (without the skip and take) - eg how many could be returned with filtering var filteredResultsCount = result.Count(); var totalResultsCount = await _context.Produtos.CountAsync(); return Json(new DtResult<ProdutoViewModel> { Draw = dtParameters.Draw, RecordsTotal = totalResultsCount, RecordsFiltered = filteredResultsCount, Data = result .Skip(dtParameters.Start) .Take(dtParameters.Length) .ToList() }); } public IActionResult Create() { ViewBag.Categorias = _context.CategoriasProduto.ToList(); return View(); } [HttpPost] public async Task<IActionResult> Create(ProdutoViewModel produtoViewModel, List<IFormFile> imagens, IFormFile imagemPerfil) { produtoViewModel.DataCadastro = DateTime.UtcNow; var produto = _mapper.Map<Produto>(produtoViewModel); _context.Add(produto); await _context.SaveChangesAsync(); await SalvarImagens(imagens, imagemPerfil, produto); return RedirectToAction(nameof(Index)); } [HttpGet] public async Task<IActionResult> Edit(int id) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } [HttpPost] public async Task<IActionResult> Edit(ProdutoViewModel produtoViewModel, int[] imgsDeletadas, List<IFormFile> imagens, IFormFile imagemPerfil) { var produto = _mapper.Map<Produto>(produtoViewModel); _context.Update(produto); await DeleteImages(imgsDeletadas); await SalvarImagens(imagens, imagemPerfil, produto); await _context.SaveChangesAsync(); return RedirectToAction(nameof(Index)); } [HttpPost] public async Task<IActionResult> LoadCards(CardParameters cardParameters) { var produtos = await _context.Produtos.Include(p => p.Imagens).ToListAsync(); var result = _mapper.Map<List<ProdutoViewModel>>(produtos); if (!string.IsNullOrEmpty(cardParameters.SearchValue)) { result = result.Where(p => p.Id.ToString().ToUpper() == cardParameters.SearchValue.ToUpper() || p.Nome != null && p.Nome.ToUpper().Contains(cardParameters.SearchValue.ToUpper()) || p.Descricao != null && p.Descricao.ToUpper().Contains(cardParameters.SearchValue.ToUpper())).ToList(); } var response = new CardResponse<ProdutoViewModel>() { Result = result.Take(cardParameters.ResultsQtd).ToList(), LengthTotalRegisters = await _context.Produtos.CountAsync(), LengthFiltredResults = result.Count() }; return PartialView("Cards",response); } private async Task SalvarImagens(List<IFormFile> imagensGaleriaArquivo, IFormFile imagemPerfilArquivo, Produto produto) { foreach(var arquivo in imagensGaleriaArquivo) { var imagemGaleria = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = arquivo, Extensao = _imageHandler.GetExtension(arquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = false }; var dtoGaleria = imagemGaleria.ToImageDto(); if(await _imageHandler.SaveImageAsync(dtoGaleria)) { try { _context.Add(imagemGaleria); } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoGaleria); } } } if(imagemPerfilArquivo != null) { var imagemPerfil = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = imagemPerfilArquivo, Extensao = _imageHandler.GetExtension(imagemPerfilArquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = true }; var dtoPerfil = imagemPerfil.ToImageDto(); try { if(await _imageHandler.SaveImageAsync(dtoPerfil)) { _context.Add(imagemPerfil); } } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoPerfil); } } await _context.SaveChangesAsync(); } private async Task DeleteImages(int[] imagesIds) { if(imagesIds.Length > 0) { var imagesIdsList = imagesIds.ToList(); var images = await _context.Imagens.Where(img => imagesIdsList.Contains(img.Id)).ToListAsync(); foreach(var img in images) { img.Path = DefaultPath; _imageHandler.DeleteImage(img.ToImageDto()); _context.Remove(img); } await _context.SaveChangesAsync(); } } } } 问题涉及到的方法有Edit、post and get、LoadCards。 我不知道为什么在加载 PartialView 时调用 Edit（get 方法），但我放置了一个 if 来处理 id 为 0 时的情况，返回 Ok()，但我想知道为什么会发生这种情况. 这是我的尝试： public async Task<IActionResult> Edit(int id) { if(id == 0) { return Ok(); } ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } 由于未指定任何值，因此参数 id 将获取默认值为零的整数。尝试使用可空整数int?。我还没有测试过它，但我相信你的 lambda 中还需要 id.Value，因为我假设 p.Id 是 int。 public async Task<IActionResult> Edit(int? id) { if(id.HasValue) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id.Value).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } else { return Ok(); } }

缓慢导航至 URL 中的 id

在我的主页上，我有一个带有ID的菜单，当我单击它时，它会滑动到相应的div并且工作顺利。 但是，当我不在主页上并且单击某个项目时，我希望能够转到

如何使用 bootstrap 或 js 折叠 div 并打开选项卡

我希望当我单击链接并平滑滚动到向下然后折叠 div 并使用 Javascript 打开选项卡时。 此代码已滚动 我希望当我单击链接并平滑滚动到下方时 collapse div 并使用 tab 打开 Javascript。 此代码已滚动 <a data-scroll href="#smoothScrool" onclick="callMyFunction('tab-1')"><h4 >Scroll, collapse and open tab automatic</h4></a> 到这里，通过句柄，我可以折叠并打开水龙头，但我不想用 Javascript 自动完成。我该怎么办？ <div class="panel-heading"><span id="smoothScroll">Scrolled Here!</span> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapse-9" class="collapsed" aria-expanded="false"> <i class="fa fa-angle-down control-icon"></i> <i class="fa fa-universal-access"> Qeydiyyatsız müraciət</i> </a> </h4> </div> <div id="collapse-9" class="panel-collapse collapse" aria-expanded="false"> <div class="panel-body"> <div class="row"> <div class="col-md-12 page-content "> <div class="hr1 margin-top"></div> <div class="tabs-section"> <!-- Nav Tabs --> <ul class="nav nav-tabs center-block"> <li class="active"><a href="#tab-1" data-toggle="tab"><i class="fa fa-question"></i>TAB 1</a></li> <li><a href="#tab-2" data-toggle="tab"><i class="fa fa-envelope"></i>TAB 2</a></li> <li><a href="#tab-3" data-toggle="tab"><i class="fa fa-briefcase"></i>TAB 3</a></li> <li><a href="#tab-4" data-toggle="tab"><i class="fa fa-legal"></i>TAB 4</a></li> </ul> <!-- Tab panels --> <div class="tab-content"> <!-- Tab Content 1 --> <div class="tab-pane fade in active" id="tab-1"> <div class="row"> </div> </div> 滚动到 div（此工作） 自动折叠div（我该怎么办？） 自动打开标签页（我该怎么做？） 请建议最佳方法和代码示例。 请参阅相关的官方引导文档，可能会有所帮助，或者至少可以让您更好地了解如何找到解决方案：http://getbootstrap.com/javascript/#tabs 还有 Jquery UI：https://jqueryui.com/tabs/#mouseover 我希望这些链接有用

Sharepoint Angular REST 添加项目产生 400（错误请求）

这几天我一直在用头撞墙。我正在尝试使用 Angular js 将项目添加到 Sharepoint 中的列表中。 检索项目很顺利，但添加项目对...

如何序列化未选中的复选框的数组？

如何修改此示例，以便它可以从未选中的复选框中获取值？ 我希望所有复选框都有一个值，如果尚未选中，我希望其值为 false。 我如何修改此示例，以便它可以从未选中的复选框中获取值？ 我希望所有复选框都有一个值，如果尚未选中，我想将其值设为false。 <input type="checkbox" name="Check01" value="true" /> <input type="checkbox" name="Check02" value="true" checked="checked" /> 默认行为 $("form").serializeArray(); // [Check02 = true] 预期行为 $("form").serializeArray(); // [Check01 = false, Check02 = true] 自己动手可能是最简单的： var serialized = $('input:checkbox').map(function() { return { name: this.name, value: this.checked ? this.value : "false" }; }); 如果还有其他输入，那么您可以序列化表单，然后使用类似上面的内容找到未选中的复选框，并将结果附加到第一个数组。 serializeArray 忽略未选中的复选框。 您可以尝试这样的操作。 工作演示 var serializedObj = {}; $("form input:checkbox").each(function(){ serializedObj[this.name] = this.checked; }); 您可以使用此获取未经检查的值 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); var $radio = $('input[type=radio],input[type=checkbox]',this); $.each($radio,function(){ if(!o.hasOwnProperty(this.name)){ o[this.name] = ''; } }); return o; }; 代码示例 另一个选择是只查看serializeArray的源代码并删除（或修改）对filter的调用。我刚刚使用该函数并创建了一个名为 serializeArrayAll 的新函数，如下所示： $.fn.serializeArrayAll = function() { var rCRLF = /\r?\n/g; return this.map(function(){ return this.elements ? jQuery.makeArray( this.elements ) : this; }) /* this is what is excluding the unchecked checkboxes (and also other disabled options) .filter(function(){ return this.name && !this.disabled && ( this.checked || rselectTextarea.test( this.nodeName ) || rinput.test( this.type ) ); }) */ .map(function( i, elem ){ var val = jQuery( this ).val(); return val == null ? null : jQuery.isArray( val ) ? jQuery.map( val, function( val, i ){ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; }) : { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; }).get(); }; 以下是我如何实现对 $.serializeArray 的简单覆盖，它修复了复选框的默认序列化行为，并为所有其他类型保留默认行为。 在下面的代码中，错过的复选框被注入到原始序列化数组中。复选框状态返回为 "true"（而不是 "on"）或 "false"，具体取决于它是否为 checked。 (function ($) { var _base_serializeArray = $.fn.serializeArray; $.fn.serializeArray = function () { var a = _base_serializeArray.apply(this); $.each(this.find("input"), function (i, e) { if (e.type == "checkbox") { e.checked ? a[i].value = "true" : a.splice(i, 0, { name: e.name, value: "false" }) } }); return a; }; })(jQuery); 您可以自定义它以返回 "on"/"off" 或 true/false。 更新：根据@shyammakwana.me 发现的错误修复了代码。 您可以将未选中的复选框数据附加到 .serializeArray 结果： var formData = $("#mybaseelement").serializeArray(); $('#mybaseelement input[type="checkbox"]:not(:checked)').each(function(i, e) { formData.push({name: e.getAttribute("name"), value: false}); }); 这是我能想到的侵入性最小的解决方案。 您可以为每个复选框添加隐藏的错误值： <input type="checkbox" name="Check01" value="true" /><input name="Check01" type="hidden" value="false" /> <input type="checkbox" name="Check02" value="true" checked="checked" /><input name="Check02" type="hidden" value="false" /> 对于未选中的复选框，您只会获得“false”值；对于选中的复选框，您只会获得“true”和“false”值，因此您可以像这样删除重复项： var params = {}; $.each($('form').serializeArray(), function (index, value) { params[value.name] = params[value.name] ? params[value.name] || value.value : value.value; }); console.log(params); // outputs: {"Check01":"false","Check02":"true"} 我根据@Pointy、@Ben 的答案和原始的 jQuery 代码制定了自己的新解决方案。 @Pointy 的答案有奇怪的行为，返回复选框的上下文，这解决了这个问题。 @Ben 的答案也没有正确执行，因为它总是返回 checkbox = on，即使它未被选中。 $.fn.serializeArrayWithCheckboxes = function() { var rCRLF = /\r?\n/g; return this.map(function(){ return this.elements ? jQuery.makeArray( this.elements ) : this; }) .map(function( i, elem ){ var val = jQuery( this ).val(); if (val == null) { return val == null //next 2 lines of code look if it is a checkbox and set the value to blank //if it is unchecked } else if (this.type == "checkbox" && this.checked == false) { return { name: this.name, value: this.checked ? this.value : ""} //next lines are kept from default jQuery implementation and //default to all checkboxes = on } else { return jQuery.isArray( val ) ? jQuery.map( val, function( val, i ){ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; }) : { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; } }).get(); }; 使用jQuery插件serializeJSON，可以使用data-unchecked-value属性来指定未选中时的值： <input type="checkbox" name="Check01" value="true" data-unchecked-value="false" /> <input type="checkbox" name="Check02" value="true" data-unchecked-value="false" checked="checked" /> JavaScript： $('input').serializeJSON({ parseBooleans: true }); // returns => { 'Check01' : false, 'Check02' : true } @SNag 的回答 工人几乎 99% 只需稍加修正即可。 更改以下行 来自： $.each(this, function (i, e) { 至： $.each(this.find('input'), function (i, e) { 解释：因为这不起作用，因为 this 返回了表单元素。因此，在表单上 .each 不会为我们提供表单内的所有输入元素。所以我做了这个修正，效果非常好。 另一个 SerializeArray() 这个实现再次基于 jQuery 的原始代码，但我需要它来实现一些具有两个不同值的 Bootstrap 的“开关”复选框。 $.fn.serializeArrayWC = function() { var rCRLF = /\r?\n/g; return this.map(function(){ return this.elements ? jQuery.makeArray( this.elements ) : this; }) .map(function(i, elem){ if (this.type == "checkbox") { // Bootstrap checkboxes with two different values. if (jQuery(this).hasClass("switched")) { // Always return value (either on-value or off-value). return { name: this.name, value: this.value }; } // Normal checkboxes. Unchecked checkboxed are not returned. if (!this.checked) { // This will be removed by the !!f filter, below. return false; } // Return the value, or "on". return { name: this.name, value: this.value||"on" }; } var val = jQuery(this).val(); if (val == null) { return { name: elem.name, value: null }; } else { return jQuery.isArray(val) ? jQuery.map( val, function( val, i ){ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; }) : { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; } }) .filter(function(i, f){ return !!f; }) .get(); }; var fields = $("form").serializeArray(); $('form input[type=checkbox]').map(function() { if( !this.checked ) { fields.push({ name: this.name, value: "off" }); } }); <form id="form1"> <input type="text" id="Name" name="Name" placeholder="Your Name" /><br/> <input type="checkbox" id="Check1" name="Check1" /><label>Active</label><br /> <input type="submit" value="Save" /> </form> <script> $("#form1").on("submit", function (e) { e.preventDefault(); var formData = $("#form1").serializeArray(); var active = $("#Check1").prop("checked"); if (active == true) { formData.push({ name: 'Active', value: 'true' }); } else { formData.push({ name: 'Active', value: 'false' }); } }); </script>

在 Firefox 中重置 <input type="time"> 的值

我发现一个有趣的跨浏览器问题，使用 jQuery 的 .val 来清除 HTML 时间输入。我想动态禁用输入并清除表单中的值。看来 Firefox 需要这样才能实现......

如何编辑/删除 iFrame 内的内容？

我有一个关于在 iFrame 中编辑/删除内容的简单问题。我尝试使用以下方法直接编辑内容： const doc = Frame.contentDocument || Frame.contentWindow.document; $（文档）...

如何在Vite JS中使用jquery-confirm

我想在我的 Laravel Vite 中导入 jquery-confirm。这是一个 jquery 插件。当我这样使用它时 <p>我想在我的 Laravel Vite 中导入 <a href="https://craftpip.github.io/jquery-confirm/" rel="nofollow noreferrer">jquery-confirm</a>。这是一个 jquery 插件。当我这样使用它时</p> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js&#34; type=&#34;module&#34;&gt;&lt;/script&gt; </code></pre> <pre><code>&lt;script type=&#34;module&#34;&gt; $(function() { $.alert({ title: &#39;Alert!&#39;, content: &#39;Simple alert!&#39;, }); }); &lt;/script&gt; </code></pre> <p>它运行良好，但是当我想从 vite 导入它时，它返回错误： 未捕获的类型错误： $.alert 不是函数</p> <p>我的app.js：</p> <pre><code>import jQuery from &#39;jquery&#39;; window.jQuery = window.$ = jQuery; require(&#34;jquery-confirm/dist/jquery-confirm.min.js&#34;) </code></pre> <p>我尝试了所有这些方法：</p> <pre><code>require(&#34;jquery-confirm/dist/jquery-confirm.min.js&#34;) require(&#34;jquery-confirm&#34;); await import(&#34;jquery-confirm&#34;); import(&#34;jquery-confirm&#34;); </code></pre> </question> <answer tick="false" vote="0"> <p>如果您使用 NPM 安装 <pre><code>jquery-confirm</code></pre>，那么您应该能够导入它：</p> <pre><code>npm install jquery-confirm </code></pre> <p>然后：</p> <pre><code>import jquery from &#34;jquery&#34;; window.jQuery = window.$ = jquery; import jQueryConfirm from &#34;jquery-confirm&#34;; window.jQuery.confirm = window.$.confirm = jQueryConfirm; </code></pre> </answer> </body></html>

为什么包含波斯语/阿拉伯语和英语字符的字符串在浏览器视图中会混乱？

我正在编写 ASP.NET Core 应用程序。我读取了 SQL 数据库的记录，我想通过 Jquery 函数将其显示在我的 html 页面中。这是我的代码的一部分： //一些代码... <question vote="0"> <p>我正在编写 ASP.NET Core 应用程序。我读取了 SQL 数据库的记录，我想通过 Jquery 函数将其显示在我的 html 页面中。这是我代码的一部分：</p> <pre><code>//some code... &lt;script charset=&#34;utf-8&#34; type=&#34;text/javascript&#34;&gt; $(document).ready(function () { var materialname = []; @if (Model.Count() != 0) { foreach (var item in Model) { @:console.log(&#39;name: &#39; + &#39;@item.material.StoreName&#39;); @:materialname.push(&#39;@item.material.StoreName&#39;); } } }); &lt;/script&gt; </code></pre> <p>当我运行此代码时，它在控制台中显示错误的字符串。 例如，DB中的StoreName是：</p> <p><a href="https://i.sstatic.net/xFfaSyHi.jpg" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQveEZmYVN5SGkuanBn" alt="enter image description here"/></a></p> <p>但它在控制台中显示如下：</p> <pre><code> name: &amp;#x645;&amp;#x62D;&amp;#x635;&amp;#x648;&amp;#x644; &amp;#x62F;&amp;#x633;&amp;#x62A;&amp;#x647; AB &amp;#x627;&amp;#x646;&amp;#x62F;&amp;#x627;&amp;#x632;&amp;#x647; 5mm </code></pre> <p>如何纠正此问题并显示正确的编码字符？</p> </question> <answer tick="false" vote="0"> <p>如果您使用 .razor 或 .cshtml 嵌入代码，请尝试此</p> <pre><code>@if (Model.Count() != 0) { foreach (var item in Model) { @:console.log(&#39;name: &#39; + &#39;HttpUtility.HtmlDecode(@item.material.StoreName)&#39;); @:materialname.push(&#39;@item.material.StoreName&#39;); } } </code></pre> <p>确保使用正确的包参考</p> <pre><code>using System.Web; </code></pre> </answer> </body></html>

单击平滑滚动到 ID

我的目的是实现平滑的滚动行为，但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时，页面将向下滚动到具有相应 ID 的部分。为了做到这一点...

ListBox 小部件移动未定义的项目

我正在使用 Kendo-UI for jQuery，版本 2021.1.119。 我遇到的问题是，我可以初始化 ListBox 小部件并显示初始状态，但是当我尝试从一个 ListB 中移动一项时...

注册后，将打开以下页面：https://myApp.by/assets/inputmask/jquery.inputmask.min.js

用户注册并登录后，打开以下页面： https://myApp.by/assets/inputmask/jquery.inputmask.min.js 在此输入图像描述 为什么当你第一次登录时它不会进入 h...

如何从这个网站创建拖拽和滑动效果？

如果从水平菜单中快速拖动并释放，菜单将自动滑动一段距离。拖动和释放的速度越快，它似乎滑动得越多。来源->appear.dk 我如何实现这个...

JavaScript/JQuery - 单击时平滑滚动到 ID

我的目的是实现平滑的滚动行为，但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时，页面将向下滚动到具有相应 ID 的部分。为了做到这一点...

通过实现正则表达式逻辑自定义数据表搜索

我有一个数据表，通过使用函数 searchStringToRegexString 将搜索字符串转换为正则表达式，在其中建立自定义搜索逻辑（使用 AND 和 OR）。以下

jQuery .text() 不更改元素文本

我有一个像这样的锚标签： 4 现在我尝试用以下内容替换文本...

多个复选框带有多个下拉列表和输入标签，将选定的值存储在一起/如果未选中则删除

假设我有多个复选框和一些文本，然后是以下格式的 1-10 下拉列表 [复选框1] [名称1] [下拉菜单1 1-10] [复选框2] [名称2] [下拉菜单2 1-10] [检查...