JQuery获取指定元素中的checkbox选中状态的一些属性

Posted 2020-10-13 冯阳阳的博客￥

     项目中用户上传病例数据，每一次上传自动生成一个病例文件夹，数据保存到后台，前端显示文件夹，现在的需求是勾选想要删除的文件夹的chenckbox，点击删除后，数据库和前端都相应的更新。

      如果是静态页面，直接根据id或者class定位到checkbox，然后判断状态，直接remove即可.但是动态页面，需要与后台交互同步，前端相应的文件夹删除，后台数据库也要删除文件夹内的数据，每一个病例文件夹对应数据库的一个recordId,那么问题是，如何知道当前checkbox选中的文件夹对应的病例id(文件夹是动态生成的，如果文件夹数量是固定得，直接按照静态页面的方法获取就行了)，项目中用到的是flask框架，见下图：

 1 <ul class="divall">
 2  {%for record in records%}
 3  {%if current_user==user%}
 4   <li class="pat_li">
 5      <input type="text" class="pat" value="{{record.title}}" onfocus="rename(this)" onblur="blur_supervise(this)" readonly/>
 6      <button class="btn_name_ok glyphicon glyphicon-ok" onclick="ok_name()"></button>
 7      <button class="btn_name_remove glyphicon glyphicon-remove"  onclick="remove_name(this)"></button>
 8          <ul class="pat_assist">
 9             <li ><input type="button" class="btn_img_icon"  > <img id={{record.id}} src={{ url_for(\'static\', filename=\'images/Dia_mng/delete_icon.png\') }} onclick=del_record(this)></input></li>
10             <li ><a href="{{url_for(\'main.history_list\',type=dia_type,record_id=record.id)}}"><button class="btn_img_icon"><img src={{ url_for(\'static\', filename=\'images/Dia_mng/icon_hiy.png\') }}></button></a></li>
11             <li > <a href="{{ url_for(\'main.record_diagnosis\',record_id=record.id,record_type=dia_type) }}"><button class="btn_img_icon"><img src={{ url_for(\'static\', filename=\'images/Dia_mng/icon_dia.png\') }}></button></a></li>
12          </ul>
13          <input type="checkbox" class="chkFolder">
14            <a href="{{ url_for(\'main.record_diagnosis\',record_id=record.id,record_type=dia_type) }}"></a >
15           </li>
16   {% endif %}
17   {% endfor %}
18    </ul>

 如图所示代码，第2行3行是flask的循环语句，意思是根据数据库的病例id的length来循环生成<li>标签.....li标签包裹的是一个文件夹的模板，那么如何确定第13行当前勾选的checkbox，所对应的病例id，从而进行删除后台数据库？解决办法是修改代码：

<input type="checkbox" class="chkFolder" id={{record.id}}>

将record in records 的每一项的record id赋值给input的id属性，然后遍历所有checkbox选取为true的元素，获取到id属性，放入数组中，也就是病例id的数组，然后通过ajax传给后台 刷新页面：

1   var channel=[];
   //divall内所有type为checkbox的且选中的元素
2   var a=$(\'.divall input[type=checkbox]:checked\').each(function()
3       {//获取id加入数组
4         if ($.inArray(jQuery(this).attr("id"), channel)==-1) {
5          channel.push(jQuery(this).attr("id"));
6         }
7      });

checkbox的属性为true或者false，但是通过jQure获得的true的值为checked。获得了id然后通过ajax传递给后台。

 var record_check = {
         "records_id":channel,
         "dia_type":"{{ dia_type }}",
         }
         $.ajax({
                     type : "post",
                     url : "/delete_records",
                     data : JSON.stringify(record_check),
                     dataType : \'json\',
                     contentType : "application/json; charset=utf-8",
                     success : function(data) {
                         console.log(data.flag);
                            if(data.flag==1)
                            window.location.reload();
                            else {
                             alert("未成功删除，请选择删除病例");
                            }
                     }
                 });