在使用复选框从表中选择时，数据被添加了两次 [英] Data being added twice on selecting from table using checkbox

问题描述

我不确定这里的循环出了什么问题.当我使用复选框从表中选择数据(使用JSON生成)时，所选数据将被多次添加.

I'm not sure what's wrong with the loop here. When I select the data(generated using JSON) from a table using checkbox, the selected data is added multiple times.

此处代码遍历循环中的所有复选框，然后选择要添加到商品数据中的选中值，这是怎么回事?

What's wrong with the code here which iterates over all the checkboxes in the loop, and selects the checked values to add in articledata.

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
    $('.box').append(articlesResult);
});

推荐答案

我认为您需要使用html而不是追加.因为append每次都会将选中的数据与当前数据一起添加，而当前数据已经具有您先前选择的数据

I think you need to use html rather than append. since append will every time add the checked data along with the current, which already has the one you previously selected

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
});
$('.box').html(articlesResult);

这篇关于在使用复选框从表中选择时，数据被添加了两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！