当有其他具有相同类别的复选框时，在复选框上显示数据答案

【问题标题】：Displaying data on checkbox checked when there are other checkboxes with same class当有其他具有相同类别的复选框时，在复选框上显示数据
【发布时间】：2018-04-12 18:55:21
【问题描述】：

我正在从数据库中获取玩家姓名列表，并且每个玩家都有一个复选框。我正在使用循环在前端显示玩家名称，代码是：

 var TeamList = matchDetails.matchData.teamAPlayers.map(function (player) {
        return  '<div class="row">'+
                    '<div class="col-md-10">'+
                        '<li style="list-style-type: none;">'+player.playerName+'</li>'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label class="switch">' +
                        '<input data-id='+ player._id +' class="player-on-strike" type="checkbox">' +
                        '<span class="slider round">' +
                        '</span>' +
                        '</label>'+
                    '</div>'+
                '</div>'
    });
    $("#team-players-list").html(TeamList);

所有的复选框都有一个通用的 player-on-strike 类，data-id 是我从数据库中获取的每个玩家的 id。

现在我希望，如果选中该复选框，则玩家的姓名会显示在某个 div 中，如果选中其他复选框，则较早的复选框会关闭，并且新玩家的姓名会显示在该 div 中。

我的代码是：

$('body').on('change', '.player-on-strike', function () {
var checkbox = document.getElementsByClassName("player-on-strike");
    if ($(checkbox.checked == true)){
        var playerOnStrike = $(this).attr('data-id');
        $('.player-on-strike1').html(playerOnStrike);
    }

});

player-on-strike one 是我想要显示玩家姓名的 div 类。

这是显示的玩家列表图片。

【问题讨论】：

你可以先清空 div 然后重新填充它 $('.player-on-strike1').html('');然后 $('.player-on-strike1').html(playerOnStrike);
您认为您的if 正在评估什么？ $(checkbox.checked == true) checkbox 是元素节点的实时nodeList，它没有checked 属性，因此它永远不会等于true，将始终返回false，然后你正在制作那个布尔值一个 jQuery 对象（出于某种原因），它本身就存在真实性。您能否展示您的minimal reproducible example 代码，该代码实际生成并显示在页面中，预计 jQuery 会在这些代码上起作用？

标签： javascript jquery

【解决方案1】：

$(".player-on-strike").click(function(){
    if( $(this).is(":checked") ){
       $('.player-on-strike1').html($(this).parent().parent().prev().children('li').text());
    }
});

【讨论】：

【解决方案2】：

在$("#team-players-list").html(TeamList);行后添加以下代码，

因为html添加动态内容后需要绑定点击事件。

$(".player-on-strike").click(function(){
    if( $(this).is(":checked") ){
        $('.player-on-strike1').html($(this).attr('data-id'));
    }
});

试试这个Demo

【讨论】：