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

Question

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

 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);

所有复选框都有一个共同的类播放器，而data-id是我从数据库中获取的每个玩家的ID。

现在我希望如果选中该复选框，则会在某个div显示播放器的名称，如果选中其他复选框，则先前的复选框会关闭，并且该播放器的名称将显示在该div中。< / p>

我这样做的代码是：

$('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);
    }

});

玩家击中一个是div的类，我想显示玩家的名字。

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

Answer 1

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

因为在向html添加动态内容后，您需要绑定click事件。

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

试试这个Demo

Answer 2

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