复选框input:checkbox

 

复选框

CreateTime--2017年6月5日14:04:55
Author:Marydon

五、复选框

　　（一）语法

　　　　<input type="checkbox" />　　

　　（二）点击当前行改变复选框的选中状态

　　第一部分：HTML

<table style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="1" border="0" width="100%">
    <tbody>
        <tr class="TableHeader" align="center">
            <td class="TableHeaderCell" style="width: 25px">
                <input type="checkbox" id="checkSelect" onclick="javascript:checkSelected('checkSelect','CONSULT_SCHEDULE_ID_TEMP');" />
            </td>
            <td class="TableHeaderCell" style="width: 35px">项次</td>
            <td class="TableHeaderCell" nowrap="nowrap">
                星期
            </td>
            <td class="TableHeaderCell" nowrap="nowrap">
                午别
            </td>
        </tr>
        <tr class="TableRow" oldclass="TableRow" align="center"
            key="${row.CONSULT_SCHEDULE_ID}"
            onclick="javascript:RowSelect(this,'downRow');GetSelect(event,'downRow');"
            onmouseover="javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'"
            onmouseout="javascript:if (this.className!='TableRowSelected') this.className='TableRow'">
            <td class="TableCellIndex" nowrap="nowrap">
                <input type="checkbox" name="CONSULT_SCHEDULE_ID_TEMP"
                    CLOSE_TZ="${row.CLOSE_TZ}" REPLACE_TZ="${row.REPLACE_TZ}"
                    value="${row.CONSULT_SCHEDULE_ID}"/>
            </td>
            <td class="TableCellIndex" nowrap="nowrap">
                1
                <input type="hidden" value="${row.ORG_CODE}"/>
            </td>
            <td nowrap="nowrap" class="TableCell" align="left">
                星期一
            </td>
            <td nowrap="nowrap" class="TableCell" align="left">
                上午
            </td>
        </tr>
        <tr class="TableRow" oldclass="TableRow" align="center"
            key="${row.CONSULT_SCHEDULE_ID}"
            onclick="javascript:RowSelect(this,'downRow');GetSelect(event,'downRow');"
            onmouseover="javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'"
            onmouseout="javascript:if (this.className!='TableRowSelected') this.className='TableRow'">
            <td class="TableCellIndex" nowrap="nowrap">
                <input type="checkbox" name="CONSULT_SCHEDULE_ID_TEMP"
                    CLOSE_TZ="${row.CLOSE_TZ}" REPLACE_TZ="${row.REPLACE_TZ}"
                    value="${row.CONSULT_SCHEDULE_ID}"/>
            </td>
            <td class="TableCellIndex" nowrap="nowrap">
                2
                <input type="hidden" value="${row.ORG_CODE}"/>
            </td>
            <td nowrap="nowrap" class="TableCell" align="left">
                星期二
            </td>
            <td nowrap="nowrap" class="TableCell" align="left">
                下午
            </td>
        </tr>
    </tbody>
</table>

　　第二部分：CSS

.TableHeader {
    clear: both;
    height: 30px;
    line-height: 30px;
}

.TableHeaderCell {
    height: 100%;
    line-height: 21px;
    color: #999;
    text-indent: 3px;
    border: #CECECE 1px solid;
    cursor: pointer;
    white-space: nowrap;
    background-image: url(images/toolbar.gif);
}

.TableRow {
    height: 21px;
    background-color: #ffffff;
}

.TableRowOver {
    cursor: pointer;
    height: 21px;
    background-color: #f4f4f4;
}

.TableRowSelected {
    cursor: pointer;
    height: 21px;
    background-color: #f4f4f4;
}

.TableCell {
    height: 25px;
    line-height: 25px;
    text-indent: 3px;
    color: #555;
    border-right: #CECECE 1px solid;
    border-bottom: #CECECE 1px solid;
    cursor: pointer;
}

.TableCellIndex {
    line-height: 21px;
    color: #000;
    border: #CECECE 1px solid;
}

　　第三部分：JAVASCRIPT

/**
 * 点击行、复选框 改变复选框的选中状态
 * @param {Object} event
 *         必要参数：目标源事件
 * @param {string} rowName
 *         可（必）要参数：行名称
 *         该参数是否必选，取决于调用RowSelect()方法时，是否携带第二个参数，即（同步）：
 *             若携带第二个参数，都必须携带，并必须保持一致；
 *             若不携带，都不携带
 * @describe:
 *         a.改变选中状态分为两种：点击行改变；点击复选框改变；
 *         b.如何区分两种点击状态？
 *             checkboxObj==srcObj ? 点击的是复选框 : 点击的是行;
 */
function GetSelect(event,rowName) {
    // 获取当前行对象
    var rowObj = rowName ? (window[rowName]) : window.row;
    // 获取该行tr的第一个td里面的复选框
    var checkboxObj = $(rowObj).find(':checkbox')[0];
    // 点击事件源对象
    var srcObj = event.srcElement ? event.srcElement : event.target;
    // 获取当前行所在的table
    var tableObj = $(srcObj).parents('table')[0];
    // 判断条件
    var flag = (checkboxObj != srcObj) ? (!checkboxObj.checked) : checkboxObj.checked;

    if (flag) {
        // 获取当前table有多少行
        var rowsLength = tableObj.rows.length;
        //
        rowsLength = (checkboxObj != srcObj) ? (rowsLength - 2) : (rowsLength - 1);
        // 获取页面上有多少个 name=checkboxObj.name 选中的复选框
        var checkboxLength = $('[name='+ checkboxObj.name + ']:checked').length;
        if (rowsLength == checkboxLength){
            // 选中 当前行所在table的第一个复选框
            $(tableObj).find(':checkbox')[0].checked = true;
        };

    } else {
        // 取消勾选 当前行所在table的第一个复选框
        $(tableObj).find(':checkbox')[0].checked = false;
    }

    // 改变当前行的复选框选中状态：如果没选中，就选中；已经选中，就取消选中
    if (checkboxObj != srcObj) {
        checkboxObj.checked = !checkboxObj.checked;
    }

};

/**
 * 全选，全不选
 * @describe
 *         根据主复选框的选中状态同步改变子复选框的选中状态
 * @param {string} checkedId
 *         必要参数：主复选框的id
 * @param {string} checkedTagName
 *         必要参数：子复选框的name
 */
function checkSelected(checkedId,checkedTagName) {
    // 获取所有的子复选框标签
    var checkTags = $('[name='+ checkedTagName +']');
    // 获取主复选框的选中状态
    var checkedStatus = $('#' + checkedId)[0].checked;

    for (var i = 0; i < checkTags.length; i++) {
        checkTags[i].checked = checkedStatus;
    }
};

/**
 * 选中当前行
 * @param {Object} row
 *         必要参数，当前行对象
 * @param {string} name
 *         可选参数，行名称，
 *         当页面只有一个这样的table时（点击该行就选中），调用该方法时可以不传该参数
 *         当页面有多个这样的table时，用于区分。
 */
function RowSelect(row, name) {
    if(!name) name = "row";
    if(window[name]) {
        window[name].className = window[name].getAttribute("oldClass");
    }
    row.className = "TableRowSelected";
    window[name] = row;
}

　　（三）通过复选框实现批量操作（删除、更改）　　

　　接着上面

/**
 * 停诊
 */
this.updateCloseStatus = function () {

    // 主键
    var CONSULT_SCHEDULE_ID = "";
    // 获取页面上已勾选的复选框
    var checkTags = $('input[name=CONSULT_SCHEDULE_ID_TEMP]:checked');

    if (checkTags.length < 1) {
        Dialog.Alert("消息提示", "请选择要修改的行！", null, null, 100);
        return;
    }

    // 取值并拼接成字符串
    $(checkTags).each(function(i,item) {
        if (0 == $(item).attr('CLOSE_TZ')) {
            Dialog.Alert("消息提示", "请取消勾选已停诊的行！", null, null, 100);
            return;
        }
        // 字符串拼接：由于数据库中该表的id是字符串，所以需要拼接上引号'
        CONSULT_SCHEDULE_ID += "'" + $(item).val() + "'" + ",";

    });    

    // 去除最后一个逗号
    CONSULT_SCHEDULE_ID = CONSULT_SCHEDULE_ID.slice(0, -1);
//        或CONSULT_SCHEDULE_ID = CONSULT_SCHEDULE_ID.substring(0,CONSULT_SCHEDULE_ID.length - 1);

    Dialog.Confirm("消息提示", "确定停诊吗？", function() {
        var param = "";
        // 是否停诊-0:是   1：否
        param ="CONSULT_SCHEDULE_ID=" + CONSULT_SCHEDULE_ID + "&CLOSE_TZ=0";

        // 发送Ajax请求
        var request = new $WebRequest(baseUrl
                + "/telemedicine/remoteCons/schedule/updateCloseStatus.do", param, function(result) {
            // 对返回的json数据进行解析
            getJsonResult(result, function() {
                // 操作成功/异常信息
                Dialog.Alert("消息提示", result.msg, function() {
                    // 刷新页面
                    object.loadData($get("PageIndex").value);
                }, null, 100);
            });
        });
        request.Start();
    }, null, null, 100, window);
};

　　说明：

　　　　1.批量操作的实现依赖于：复选框的选中状态及Ajax实现；

　　　　2.Dialog对象是封装好的方法；

　　　　3.后台及SQL实现见文章：IBATIS + ORACLE（二）。

　　　　　　

相关推荐：

• 类似文章