选择时的 Jquery 复选框添加名称属性并在多个选择中增加

Question

好的，我正在使用 codeigniter、Grocery CRUD 和 Jquery 构建一个梦幻足球游戏。我有一个视图，用户从复选框中选择 15 个玩家，我将使用名称属性选择 GK1、GK2、DEF1、DEF2、DEF3、DEF4、DEF5、MID1、MID2、MID3、MID4、MID5、FWD1、FWD2 和 FWD3 和将它们的值传递给控制器​​。我的问题是，我如何为中场球员 (MID) 创建一个 javascript Jquery 代码，这样当用户单击第一个中场球员时，javascript 附加输入名称 =“MID1”，然后在选中另一个框时，它变为输入名称 = MID2" 而不更改 MID1 的名称。到目前为止，我的 javascript 正在工作，但是当我单击另一个玩家时，如果我取消选择该特定玩家的名称玩家没有删除，所有玩家的名称值也会发生变化。这是我的 JS..

<script>

    $(document).ready(function(){
        $(".gk").change(function() {
            var number=$('[class="gk"]:checked').length;
            if(this.checked) {


                $(".gk").each(function() {
                    $(".gk").attr('name',"GK"+number);
                });

            } else {
                $('.gk').attr('name', number);
            }
        });
    });

</script>

这是我的看法

 <input type="checkbox" class="gk"  value="<?=$row->playerID ?>" > <?= $row->playerID?> </input>                                                          

Answer 1

关于你的所有玩家都改名的问题，罪魁祸首可能是'.each()'。是不是应该更像：

$(".gk").change(function() {
        if(this.checked) {
            var number=$('[class="gk"]:checked').length;

            // $(".gk").each(function() {
                $(this).attr('name',"GK"+number);
            // });

Answer 2

除此之外，当您取消选择播放器时会遇到问题，因为您只运行在检查 $(".gk") 时更新名称的那段代码......另外，为了添加一个不同的数字，例如，您必须增加一个索引值，并将其添加到名称中，而不是变量编号，这将是所选元素的大小......最重要的是，最后一个变量“number”应该在“if”之外，否则你不会在 else 中看到它...

检查一下，看看有没有帮助

$(document).ready(function(){
    $(".gk").change(function() {
        var checked=$('[class="gk"]:checked').length;
        alert("You have "+checked+" Gks checked")
        var index = 1;
        $(".gk").each(function() {
            if($(this).prop('checked')){
                $(this).attr('name',"GK"+index);
                alert("Getting GK "+index)
                alert("this GK name is "+$(this).attr('name') 
                index++;
            }    
            else {
                $('.gk').attr('name',"");
            }
        });
    });
});

http://jsfiddle.net/xn3P9/5/

一旦您更新了名称，它就不会显示在页面检查器上。

你的最终解决方案应该是这样的：

$(document).ready(function(){
    $(".gk").change(function() {
        var index = 1;
        $(".gk").each(function() {
            if($(this).prop('checked')){
                $(this).attr('name',"GK"+index);
                index++;
            }    
            else {
                 $('.gk').attr('name',"");
            }
        });
    });
});

Answer 3

我仍然很难理解您在寻找什么，但可能与此类似：

$(document).ready(function(){
    $(".gk").change(function() {
        $(".gk:checked").each(function(index, gk) {
            //Will give each selected GK a unique name
            $(".gk:checked").attr("name", "GK"+index);
        });
    });
});