如何遍历被选中的checkbox的值以及所在行其他列中input的值

Question

如题，如何把被选中的checkbox的值以及所在行其他列中input的值以字符串的方式传递到后台？

Answer 1

前端代码如下：
     <table class="w3-table w3-striped-blue" style="width: 1146px;">
                <tr class="xxx">
                    <td style="width:130px;text-align: center;">BX2013</td>
                    <td style="width:120px;text-align: center;">张三</td>
                    <td style="width:286px;text-align: center;">兴趣特长</td>
                    <td style="width:170px;text-align: center;">一级运动员</td>
                    <td style="width:250px;text-align: center;">
                        <ul class="comment">
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                        </ul>
                        <input type="button" name="stars" class="stars1" value="0"><span class="stars2">0</span>
                    </td>
                    <td style="width:100px;text-align: center;"><a href="javascript:void(0);" data-toggle="modal" data-target="#rongyuModal" data-backdrop="true"><span class="cylbchakan">查看</span></a></td>
                    <td style="width:100px;text-align: center;vertical-align: middle;"><input type="checkbox" name="userid" value="1"></td>
                </tr>
                <tr class="xxx">
                    <td style="width:130px;text-align: center;">BX2013</td>
                    <td style="width:120px;text-align: center;">张三</td>
                    <td style="width:292px;text-align: center;">个性发展</td>
                    <td style="width:170px;text-align: center;">二级运动员</td>
                    <td style="width:250px;text-align: center;">
                        <ul class="comment">
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                        </ul>
                        <input type="button" name="stars" class="stars1" value="0"><span class="stars2">0</span>
                    </td>
                    <td style="width:100px;text-align: center;"><a href="javascript:void(0);" data-toggle="modal" data-target="#dianpingModal" data-backdrop="true"><span class="cylbchakan">查看</span></a></td>
                    <td style="width:100px;text-align: center;"><input type="checkbox" name="userid" value="0,2"></td>
                </tr>            
</table>
<button type="button" class="tongguoshenhe" onclick="shenheuser()">通过审核</button>
以下是五星好评的代码：
           $(".comment>li").on("click", function () {
                $(this).addClass("current").siblings().removeClass("current");
                 var stars=$(this).index()+1;
                 var newstars='0,'+stars;
                 alert(newstars);
                $(this).parents("tr").find("input[name=stars]").val(stars);
                //$(this).parents("tr").find("span.stars2").html(stars);
            });这里是使用了网上的仿淘宝的五星好评功能，不点击星的时候，input的值和span中的内容都是0，点击了星以后，input的值变成了星的数量，span中内容也变成了星的数量，当勾选checkbox以后，点击通过审核按钮，把勾选了checkbox的值和这一行中input的值以字符串的形式组合在一起传递到后台去，结果类似
1(选中的第一条记录的值),3(选中的第一条记录的input的值),2(选中的第二条记录的值),5(选中的第二条记录的input的值)以下是循环读取input和checkbox的值的代码：
<script>
function shenheuser(){
 $('input:checkbox:checked').each(function(){
            ids = $('input[type=checkbox]:checked').closest('tr').find("span stars2").map(function(){return this.html()}).get().join();
            names = $('input[type=checkbox]:checked').closest('tr').find('input[type=checkbox]').map(function(){return this.innerHTML}).get().join();
        });
        alert(ids);
        alert(names);
}
本来我想把点击星获得的数字赋值给input，但是不知道怎么获取input的值，于是把点击星获得的数字赋值给<span>，想通过获得span的值来解决这个问题，但是还是不行，这个问题折腾我一天了，不得已来请教高手。是获取input的值，然后和checkbox的值拼接成字符串容易些还是获取span的值，然后和checkbox的值拼接成字符串更容易呢？
运行结果是第一个alert的内容为空，第二个alert的内容是''，

Answer 2

更正一下，二楼代码中checkbox的值是(0,1)这样的，这样的处理我本来是想变通的解决这个问题的，想点击星以后，用星的数字替换掉checkbox的值中的0，然后提交的时候把checkbox的值直接拼接传递到后台的，但是这样的话，还是不正确。所以实际上checkbox的值应该是(1)这样的，也就是(记录的id)，是变化的。

Answer 3

     <table class="w3-table w3-striped-blue" style="width: 1146px;">
                <tr class="xxx">
                    <td style="width:130px;text-align: center;">BX2013</td>
                    <td style="width:120px;text-align: center;">张三</td>
                    <td style="width:286px;text-align: center;">兴趣特长</td>
                    <td style="width:170px;text-align: center;">一级运动员</td>
                    <td style="width:250px;text-align: center;">
                        <ul class="comment">
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                        </ul>
                        <input type="button" name="stars" class="stars1" value="0"><span class="stars2">0</span>
                    </td>
                    <td style="width:100px;text-align: center;"><a href="javascript:void(0);" data-toggle="modal" data-target="#rongyuModal" data-backdrop="true"><span class="cylbchakan">查看</span></a></td>
                    <td style="width:100px;text-align: center;vertical-align: middle;"><input type="checkbox" name="userid" value="1"></td>
                </tr>
                <tr class="xxx">
                    <td style="width:130px;text-align: center;">BX2013</td>
                    <td style="width:120px;text-align: center;">张三</td>
                    <td style="width:292px;text-align: center;">个性发展</td>
                    <td style="width:170px;text-align: center;">二级运动员</td>
                    <td style="width:250px;text-align: center;">
                        <ul class="comment">
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                            <li>☆</li>
                        </ul>
                        <input type="button" name="stars" class="stars1" value="0"><span class="stars2">0</span>
                    </td>
                    <td style="width:100px;text-align: center;"><a href="javascript:void(0);" data-toggle="modal" data-target="#dianpingModal" data-backdrop="true"><span class="cylbchakan">查看</span></a></td>
                    <td style="width:100px;text-align: center;"><input type="checkbox" name="userid" value="2"></td>
                </tr>            
</table>
<button type="button" class="tongguoshenhe" onclick="shenheuser()">通过审核</button><script>
           $(".comment>li").on("click", function () {
                $(this).addClass("current").siblings().removeClass("current");
                 var stars=$(this).index()+1;
                $(this).closest("tr").find("input[name=stars]").val(stars);
                //$(this).parents("tr").find("span.stars2").html(stars);
            });function shenheuser(){
var arr = [];
$('input:checkbox:checked').each(function(){
arr.push($(this).val(), $(this).closest("tr").find("input[name=stars]").val());
    });
    alert(arr.join(","));
}
</script>