判断checkBox为空，左右删除选项值

最新推荐文章于 2022-04-20 22:21:41 发布

maypol

最新推荐文章于 2022-04-20 22:21:41 发布

阅读量663

点赞数

分类专栏： js 文章标签： function generator table html action input

本文链接：https://blog.csdn.net/maypol/article/details/5415244

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
        <!--
        var bCount=1;
        //插入行
        function addOp(id,name){
            newRow=hadchoice.insertRow(hadchoice.rows.length);
            newRow.id="trhad";
            newRow.ln=bCount;

            Del=newRow.insertCell(0);
            Del.ln=bCount;
            Del.οnclick=delOp;
            Del.innerHTML="<input type='checkbox' name='hadcho' style='width:40' value='"+id+"' ln='"+bCount+"' checked>"+name;

            bCount++;
        }
        //删除行
        function delOp(){
            line=parseInt(event.srcElement.ln,10);
            var disSelected;
            if (line>0) {
                   for (i=1;i<hadchoice.rows.length;i++){
                    if (trhad[i].ln==line){
                        disSelected=event.srcElement.value;//获得删除值
                         hadchoice.deleteRow(i)
                    }
                   }
               }
            var operator = document.getElementsByName("operator");
            for(i=0;i<operator.length;i++) {
                if(operator[i].value==disSelected) {
                    operator[i].checked=false;
                }
            }


        }
        //判断左边的行在右边是否已经存在
        function justValue(chbox,id, name) {
            var hadvalue=false;//是否已经选择
            var exits = document.getElementsByName("hadcho");
            if(exits.length!=0){
                for(i=0;i<exits.length;i++) {
                    if(exits[i].value==id) {
                        if(chbox.checked==true) {//如果是已选，则添加
                            exits[i].checked=true;
                            hadvalue=true;
                        } else if(chbox.checked==false) {//如果是未选，则删除行
                            hadvalue=true;
                            var line=parseInt(exits[i].ln,10);
                            if (line>0) {
                                for (j=1;j<hadchoice.rows.length;j++){
                                    if (trhad[j].ln==line){
                                        hadchoice.deleteRow(j);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            if(!hadvalue) {//未选择，则添加行
                addOp(id,name);
            }
        }
        </script>
</HEAD>

<BODY>
    <form name="frm" action="" method="post">
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td><input type="checkbox" name="operator" οnclick="justValue(this,'1','一');" value="1">一</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="operator" οnclick="justValue(this,'2','二');" value="2">二</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="operator" οnclick="justValue(this,'3','三');" value="3">三</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="operator" οnclick="justValue(this,'4','四');" value="4">四</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="operator" οnclick="justValue(this,'5','五');" value="5">五</td>
                    </tr>
                </table>

            </td>
            <td>
                <table id="hadchoice">
                    <tr id="trhad">
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</BODY>
</HTML>