选中复选框 获取复选框后面文字 显示在div中 取消选中 则不显示

 <div class="am-form-group"  style="height: auto; width: 30%;">
                                        <label for="user-phone" class="am-u-sm-12 am-form-label am-text-left">评分项选择 </label>
                                        <div class="am-u-sm-12  am-margin-top-xs">
                                        <div class="am-scrollable-vertical" >
                                          <table class="am-table am-table-bordered am-table-striped am-text-nowrap am-table-centered">
                                            <thead>
                                                <th>选择评分表</th>
                                                <th>评分表名称</th>
                                            </thead>
                                            <tbody>
                                                <volist name="xm" id="xo">
                                                <tr>
                                                    <td><input type="checkbox" name="xmcode[{$xo.xmcode}]" class="checkbox" value="{$xo.xmcode}"></td>
                                                    <td>{$xo.xmname}</td> 
                                                </tr>
                                                </volist>
                                            </tbody>
                                          </table>
                                        </div>
                                            
                                        </div>


                                        </div> 
                                        <div class="am-scrollable-vertical xuanze" style="position: absolute;right: 18%;width: 50%; top: 58.5%; ">
                                              <table class="am-table am-table-bordered am-table-striped am-text-nowrap am-table-centered ">
                                                <thead>
                                                    <th>已选评分项</th>
                                                    <th>设置最大分值</th>
                                                    <th>是否为一键否决项</th>
                                                </thead>
                                                <tbody id="tbody">
                                                </tbody>
                                              </table>
                                            </div>

------以上是表单---------------------------------

 var num=0;//定义一个全局变量
    $(function(){
        $(".xuanze").hide();//页面加载的时候隐藏div
    }); 

$(".checkbox").on('click',function(){

        var xmname = $(this). parent().next().text();//获取点击复选框的文字
        if($(this).is(':checked'))//判断复选框是否选中
        {   
            var str = '';
            str+= "<tr><td>"+xmname+"</td></tr>";//选中后拼接想要展示的数据
            $("#tbody").append(str);//在tbody里面展示
            num=num+1;//选中让全局变量加一
        }
        else
        {
            num=num-1;//取消选中的时候 全局变量减一 获取tbody下所有的tr
            $("#tbody tr").each(function(){
                var text = $(this).children("td:first").text();//获取tr中第一行td中的文字
                if(text==xmname)//判断获取到的文字
                {
                    $(this).remove();//相等的话删除掉此行
                }
            })
        }
        if(num==0)//判断定义的全局变量是否
        {
            $(".xuanze").hide();//等于0隐藏
        }
        else
        {
            $(".xuanze").show();//不等于0的时候显示
        }
    });