33、尚硅谷_SSM高级整合_删除_全选&全不选.avi原创

那么接下来呢，我们就来完成我们这个批量删除，这个批量删除呢，我们这有一个都选框，当我们选中，哎，下边全部选中，这一块不选中，下边也都不选中，包括我们在这儿点的时候，诶，当我们选满这个也跟着选中，当我们取掉一个这个也跟着不选中，所以说呢，我们先把这个效果啊全选，全部选，我们先做出来，那么呢，我们先把这个样式定义出来，哎，我们这个表头会有一个这个take box。好，我们来到咱们这个页面。页面我们这个表单。来咱们这个员工列表表单，好，这个表单呢，前面呃，应该还多一个check box。这个这个boss input。好，这个input的，咱们这个check box。Input，然后呢，它的type是一个哎，Check box，咱们这个多选框，哎可以给它一个ID，比如呢，它就叫check on，好，这里边呢，有一个咱们这个单元格，那么接下来我们每次要展示数据的时候，哎，我们来看啊，我们解析展示数据的时候呢，不仅要有这些，呃，员工信息的element，我们还得有咱们这个单check box。

Box啊，咱们这个显示的内容，那我们就直接把这个check box创建出来input type。等于check。Box。好，我们就叫check box。然后呢，我们可以给他一个ID，哎不是ID，我们下边的每一个check box呢，能给一个class，这个呢，我们就叫check item啊，每一个选项的咱们这个啊check box好把这个呢，我们构造出来以后呢，我们给在咱们这一块构造表单给TR里边填的时候，我们第一个先把它填进去。

把这个效果呢，我们先写出来，样式我们先写出来，好，我们先把咱们这个check box的。咱们这个单元格拿过来。啊，这个效果呢，我们先做出来，我来刷新，来到咱们这一块刷新啊，这一块呢，也有包括呢，我们这一块也有，那么这个效果呢，哦，有点问题，那这个这个东西啊，哎，这个input是要加在咱们这个TD里边的啊，没写TD。好，我们就直接给他统一创建。好放在这个TD里边的啊，比如说呢，我们来测试。刷新来这个效果呢，就写好了，那么接下来呢，我们就把这个全选全部选，我们点击这个按钮，下边跟着一起选中来，我们先来做这个事情。这个按钮呢，我们来看啊，右键检查元素，好，这个按钮呢，有一个叫checko。

点击推头。好，我们在这一块先要完成全选。全不全？不选咱们这个功能，那么呢，我们先来点击咱们这个按钮，当我们点击哎这个check on按钮以后呢，我们来给它绑定单击时间。当我们点了这个按钮以后，其实呢，我们先来看一下啊，我们应该哎下边的每一个的咱们这个check的咱们这个选择框啊，这个选择框呢，他们都有一个class，所以说呢啊。我们可以这么来找到这些选择框，而这些选择框的咱们这个选中没选中属性要跟它一致，所以说呢，我们可以先弹出，弹出咱们这个啊当前元素。

好，我们当前的咱们这个CHECK2选择框，它里边的是否选中没选中状态，那at tr它有一个属性就是叫check，那可以拿到这个状态，可以知道当前咱们这选择框被选中了还是没选中，我点一下你看啊，如果没选中的话，这还有一个on fight，哎，也就说呢，这一块我们用at tr获取咱们这个check的值的时候总是onDeFi，所以说我们这块得注意一下at tr。获取咱们这个。Check。是undevi。On的原因就是因为我们当时定义咱们这个这个一步的框的时候，确实没有check属性，所以说呢，我们这些哎，我们我们这些哎，咱们这个原生的。

原生的属性。啊，咱们这个盗墓原生的属性，比如呢，我们这个是否选中了这些，我们我们呢，推荐别用at tr获取值，我们用prop获取值，这个prop能正确的获取到属性的值，而HTR我们就可以用来获取自定义。属性的值好，我们来看咱们这个，我们来刷新改为proper以后我来点，诶选中就是出没选中就是false，所以说呢，这样来看看啊，就说呢，以后以后呢，我们就使用proper来改变和读取，哎修改啊读取咱们这个道原声。属性的咱们这个值好，那么呢，咱们这个当前元素是否被选中状态我们已经拿到了，接下来呢，我们就让所有的这个选中框，哎，我们跟它状态同步就行了，Prop好，然后呢，它的这个check。

Check的值啊，就是我们当前的。这个值。我们全选按钮的，咱们这个它的选择状态，这样的话呢，哎，我们就做好了，我们来看啊，选中不选中，选中不选中，哎那就都好了，那么接下来还有当我们把这些都点满以后，这个也得跟着选择起来，所以说呢，我们相当于为每一个咱们这个check item，我们也绑定点击事件，那么这个check item呢，我们看啊，也是我们后来创建的，所以说呢，我们绑事件还是用我们之前的这个啊绑事件方式。用这个document document好，Document，咱们当前文档里边，我们来绑定单击事件给哪些元素呢？因为我们现在的这些item可能是后来动态添加的这些元素，绑定单击事件，单击事件触发以后的回调函数。

触发以后的回调函数，这个回调函数呢，就是相当于哎，我们监控一下，当我们这个EEE都点满以后，把它这个也点满，所以说呢，我们来判断一下。我们要修改咱们这个check out，咱们这个值。我们要修改它的这个CHT的值，而它的这个CH的值到底是多少，我们要看状态，看我们当前选中的咱们这个元素是不是就是我们这个总元素的这个个数啊，我们可以这么来判断啊，我们可以判断。判断当前选中的元素是不是五个，判断当前选中的。选择中的元素。是否五个，我说呢是不选满了，那么呢，我们就可以这么来判断，好，我拿到咱们这些，哎check item每一个选择框，哎每一个选择框就是他们，哎他们他们呢，我们来看已经被选中的，诶过滤一下诶有一个check的选择器，这是我们解壳瑞中呢，哎有一个咱们这个check的选择器，它的作用呢，就是匹配所有被选中的咱们这个复选框，好我们来看一下这个复选框的个数，哎是多少我们就知道了。

好，这个个数我们来把它一下，我们来看效果。刷新，当我们选中一个以后呢，哎，被选中就是一个，选中两个，被选中两个，那么呢，我们接下来只需要判断这个个数是不是等于五就行了。比如说呢，哎，是否等于五，如果我们判断等于五，这就写死了，我们页面呢，如果以后要显示十条数据，那么这个这item就应该是十个，所以说呢，我们这一块做一个动态判断，是不是等于它的啊，所有check item的个数。

的个数，哎，我们做了一个这个判断，这个判断的意思呢，如果等于，哎，我们这里边呢，给一个标志。Bla，那呢，如果等于它的意思就是全选满了，否则就没选满，所以说呢啊，我们这个全选满会返回处，没选满会返回false，我们这个啊，我们这个上边的这个全选全部选的这个大选择框，那么它的状态就应该是跟我们这个标志是一样的，来看这么来做行不行，来刷新好当我们选中以后。哎，选中走走，哎这样就选中了，我们取消一个，哎，他也就跟着取消了，包括我们全选，哎全部选我们都做完了，好，那这样我们这个先把这个功能做完。

全选，全部选。