问题:循环元素,被选中元素个数,全选

一段时间不写js都有点忘记了,这里看几个常见的js,涉及到循环,计算元素个数,checkbox选中等问题,首先是html元素

<div class="content border p05">
            <div><input type="checkbox" id="selectAll" name="selectAll">Select All</div>
            <table>
                <tbody>
                    <tr style="text-align: left;">
                        <th>&nbsp;</th>
                        <th style="width:10%;">Qty</th>
                        <th>Descritpion</th>
                        <th>Item ID</th>
                    </tr>
                                        <tr>
                        <td><input type="checkbox" class="item_id" value="29714200" name="item_id[]" style="width: 12px;"></td>
                        <td>25</td>
                        <td>Personalized Holiday CardsPersonalized Holiday Cards - 5" x 7" Cardstock - Standard Cardstock - White Envelopes</td>
                        <td>29714200</td>
                    </tr>
                                        <tr>
                        <td style="text-align: center;padding-top:30px;" colspan="4"><div class="btn large step1">Submit</div></td><td>
                    </td></tr>
                </tbody>
            </table>
        </div>

1.全选问题

        $(‘#selectAll‘).click(function() {
            if($(this).attr(‘checked‘) == ‘checked‘) {
                $("input[name=‘item_id[]‘]").attr("checked", true);
                //$(‘.item_id‘).attr(‘checked‘, true);
                var length = $(‘.item_id‘).length;
                $(‘#number‘).html(length);
            } else {
                $(‘.item_id‘).removeAttr(‘checked‘);
                $(‘#number‘).html(0);
            }
        });

注意判断checkbox是否选中是"if($(this).attr(‘checked‘) == ‘checked‘)",不是if($(this).attr(‘checked‘) == ture),但是很奇怪的是可以用true赋值$("input[name=‘item_id[]‘]").attr("checked", true);

2.判断checkbox选中个数

$(‘.item_id:checked‘).length,这个写法很简洁的

3.循环元素,绑定函数

            var num = 0;
            $.each($(‘.item_id‘),function(i,v){
                if($(this).attr(‘checked‘) == ‘checked‘){
                    num++;
                }
            });
            if(0 == num){
                alert(‘please select item(s)‘);
                return false;
            }

其实这写法有点啰嗦,可以直接if(0==$(‘.item_id:checked‘).length){ alert(‘please select item(s)‘); }

时间: 2024-08-01 04:42:45

问题:循环元素,被选中元素个数,全选的相关文章

JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能

度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gridview中实现如下效果:一级.二级因为三级没有全部选中而显示半选状态 ?一级    ?二级       三级1        三级2 js↓ $(function(){ BindCheckNode(); $("span[name^='lblCheck']").click(checkBo

jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkbox" onclick="contracts_checkall()" id="contracts_checkall"> 全选 js: 1 var checkall = $("#contracts_checkall").attr('ch

JQ 全选设定与设置选中

复选数据框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

jq 全选、反选、判断选中的条数

1.全选或全不选.当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态. $("#all").click(function(){ if(this.checked){ $("#list :checkbox").prop("checked", true); }else{ $("#list :checkbox").prop("checked",

jquery实现全选、全不选、反选、获取选中的所有值总结

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html><html><head> <meta charset="UTF-8"> <title>checkbox2</title> <style> li { list-style:none; } </style> <script src="js/

html,javaScript中怎么控制复选框checkbox的全选,全不选,以及全选中,全选按钮选中,其中一个或者多个没选,则全选按钮不被选中

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ include file="/commons/jsp/htmtag.jsp"%> <html><head> <meta http-equiv="Content-Type"

复选框与全选框的选中状态的联动

类似在网购时在购物车选择商品时的复选框与全选框的联动事件 对于原型,构造函数之类的还不熟,强行用了一波,结果写得又长又臭. 但总算功能还是做出来了,总要多实践才会变熟的.全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

checkbox的全选与反选

需求:        1.当all选项勾选时,所有选项都被勾选,反正当所有选项被选中时,全选选项自动选中        2.点击反选按钮时,被选中的选项取消选中,未被选中的选项被选中 Html结构 <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">

JS中表格的全选和删除要注意的问题

在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. 以下是我自己做的一个小例子,用来更简单明了的说明js全选和删除. 一.全选的说明:当选中全选的checkbox时,下面1-5都会选中,没有选中时1-5都不会选中,这个实现不难,步骤如下: 1.获取全选框的选中状态, 2.for循环设置所有的单选框的选中状态 主要代码: //1.获取全选按钮 var