zoukankan      html  css  js  c++  java
  • JQuery获取指定元素中的checkbox选中状态的一些属性

         项目中用户上传病例数据,每一次上传自动生成一个病例文件夹,数据保存到后台,前端显示文件夹,现在的需求是勾选想要删除的文件夹的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("未成功删除,请选择删除病例");
                                }
                         }
                     });
  • 相关阅读:
    学习进度笔记
    学习进度笔记
    学习进度笔记
    学习进度笔记
    博雅数据机器学习10
    学习进度笔记
    HDFS上文件权限操作
    HBase的安装与使用
    hadoop完全分布式安装教程
    python安装easygui
  • 原文地址:https://www.cnblogs.com/fengchaoran/p/7779111.html
Copyright © 2011-2022 走看看