一位互联网老兵华立的个人日志。

JS控制单选或多选
<form method="get">
    <input type="hidden" name="m" value="home">
    <input type="hidden" name="c" value="Lists">
    <input type="hidden" name="a" value="index">
    <input type="hidden" name="tid" value="5">
    <input type="hidden" name="cid" value="20">
    <div id="formhidden">
    <input type="hidden" name="daoguishuchudianya" value=""><input type="hidden" name="daoguidianya" value=""><input type="hidden" name="daoguigonglv" value=""><input type="hidden" name="PFC" value=""><input type="hidden" name="DCOK" value=""><input type="hidden" name="daoguixiaolv" value="">    </div>
    <div class="select_center">
        <div class="selection-parameter">
            <div class="div_1">
                <span>产品型号搜索</span>
                <input type="text" name="keyword" value="" autocomplete="off">
                <button class="blue_btn button-selection-submit" type="submit"><span></span></button>
            </div>
            <div class="div_2">
                <ul>
                                            <li>
                            <span class="parameter-title">标称输出电压(VDC)</span>
                            <div class="selection-select daoguishuchudianya">
                                <!-- <a href="javascript:vform('','','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_" class="add">-</span></a> -->
                                <a href="javascript:vform('','','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_" class="add">-</span></a>
                                <a href="javascript:vform(0,'5v','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_0">5v</span></span></a><a href="javascript:vform(1,'12v','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_1">12v</span></span></a><a href="javascript:vform(2,'15v','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_2">15v</span></span></a><a href="javascript:vform(3,'24v','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_3">24v</span></span></a><a href="javascript:vform(4,'48v','daoguishuchudianya','checkbox');"><span id="daoguishuchudianya_4">48v</span></span></a>                            </div>
                        </li>
                                            <li>
                            <span class="parameter-title">输入电压(VAC)</span>
                            <div class="selection-select daoguidianya">
                                <!-- <a href="javascript:vform('','','daoguidianya','radio');"><span id="daoguidianya_" class="add">-</span></a> -->
                                <a href="javascript:vform('','','daoguidianya','radio');"><span id="daoguidianya_" class="add">-</span></a>
                                <a href="javascript:vform(0,'85-264V','daoguidianya','radio');"><span id="daoguidianya_0">85-264V</span></span></a><a href="javascript:vform(1,'90-264V','daoguidianya','radio');"><span id="daoguidianya_1">90-264V</span></span></a><a href="javascript:vform(2,'340-550V','daoguidianya','radio');"><span id="daoguidianya_2">340-550V</span></span></a>                            </div>
                        </li>
                                            <li>
                            <span class="parameter-title">额定功率</span>
                            <div class="selection-select daoguigonglv">
                                <!-- <a href="javascript:vform('','','daoguigonglv','radio');"><span id="daoguigonglv_" class="add">-</span></a> -->
                                <a href="javascript:vform('','','daoguigonglv','radio');"><span id="daoguigonglv_" class="add">-</span></a>
                                <a href="javascript:vform(0,'15','daoguigonglv','radio');"><span id="daoguigonglv_0">15</span></span></a><a href="javascript:vform(1,'25','daoguigonglv','radio');"><span id="daoguigonglv_1">25</span></span></a><a href="javascript:vform(2,'30','daoguigonglv','radio');"><span id="daoguigonglv_2">30</span></span></a><a href="javascript:vform(3,'50','daoguigonglv','radio');"><span id="daoguigonglv_3">50</span></span></a><a href="javascript:vform(4,'60','daoguigonglv','radio');"><span id="daoguigonglv_4">60</span></span></a><a href="javascript:vform(5,'70','daoguigonglv','radio');"><span id="daoguigonglv_5">70</span></span></a><a href="javascript:vform(6,'75','daoguigonglv','radio');"><span id="daoguigonglv_6">75</span></span></a><a href="javascript:vform(7,'96','daoguigonglv','radio');"><span id="daoguigonglv_7">96</span></span></a><a href="javascript:vform(8,'105','daoguigonglv','radio');"><span id="daoguigonglv_8">105</span></span></a><a href="javascript:vform(9,'120','daoguigonglv','radio');"><span id="daoguigonglv_9">120</span></span></a><a href="javascript:vform(10,'180','daoguigonglv','radio');"><span id="daoguigonglv_10">180</span></span></a>                            </div>
                        </li>
                                            <li>
                            <span class="parameter-title">带PFC</span>
                            <div class="selection-select PFC">
                                <!-- <a href="javascript:vform('','','PFC','radio');"><span id="PFC_" class="add">-</span></a> -->
                                <a href="javascript:vform('','','PFC','radio');"><span id="PFC_" class="add">-</span></a>
                                <a href="javascript:vform(0,'是','PFC','radio');"><span id="PFC_0">是</span></span></a><a href="javascript:vform(1,'否','PFC','radio');"><span id="PFC_1">否</span></span></a>                            </div>
                        </li>
                                            <li>
                            <span class="parameter-title">DC-OK</span>
                            <div class="selection-select DCOK">
                                <!-- <a href="javascript:vform('','','DCOK','radio');"><span id="DCOK_" class="add">-</span></a> -->
                                <a href="javascript:vform('','','DCOK','radio');"><span id="DCOK_" class="add">-</span></a>
                                <a href="javascript:vform(0,'是','DCOK','radio');"><span id="DCOK_0">是</span></span></a><a href="javascript:vform(1,'否','DCOK','radio');"><span id="DCOK_1">否</span></span></a>                            </div>
                        </li>
                                            <li>
                            <span class="parameter-title">效率</span>
                            <div class="selection-select daoguixiaolv">
                                <!-- <a href="javascript:vform('','','daoguixiaolv','radio');"><span id="daoguixiaolv_" class="add">-</span></a> -->
                                <a href="javascript:vform('','','daoguixiaolv','radio');"><span id="daoguixiaolv_" class="add">-</span></a>
                                <a href="javascript:vform(0,'78%','daoguixiaolv','radio');"><span id="daoguixiaolv_0">78%</span></span></a><a href="javascript:vform(1,'80%','daoguixiaolv','radio');"><span id="daoguixiaolv_1">80%</span></span></a><a href="javascript:vform(2,'81%','daoguixiaolv','radio');"><span id="daoguixiaolv_2">81%</span></span></a><a href="javascript:vform(3,'82%','daoguixiaolv','radio');"><span id="daoguixiaolv_3">82%</span></span></a><a href="javascript:vform(4,'83%','daoguixiaolv','radio');"><span id="daoguixiaolv_4">83%</span></span></a><a href="javascript:vform(5,'84%','daoguixiaolv','radio');"><span id="daoguixiaolv_5">84%</span></span></a><a href="javascript:vform(6,'85%','daoguixiaolv','radio');"><span id="daoguixiaolv_6">85%</span></span></a><a href="javascript:vform(7,'86%','daoguixiaolv','radio');"><span id="daoguixiaolv_7">86%</span></span></a><a href="javascript:vform(8,'87%','daoguixiaolv','radio');"><span id="daoguixiaolv_8">87%</span></span></a><a href="javascript:vform(9,'88%','daoguixiaolv','radio');"><span id="daoguixiaolv_9">88%</span></span></a><a href="javascript:vform(10,'90%','daoguixiaolv','radio');"><span id="daoguixiaolv_10">90%</span></span></a><a href="javascript:vform(11,'91%','daoguixiaolv','radio');"><span id="daoguixiaolv_11">91%</span></span></a><a href="javascript:vform(12,'92%','daoguixiaolv','radio');"><span id="daoguixiaolv_12">92%</span></span></a><a href="javascript:vform(13,'92.5%','daoguixiaolv','radio');"><span id="daoguixiaolv_13">92.5%</span></span></a><a href="javascript:vform(14,'93%','daoguixiaolv','radio');"><span id="daoguixiaolv_14">93%</span></span></a><a href="javascript:vform(15,'94%','daoguixiaolv','radio');"><span id="daoguixiaolv_15">94%</span></span></a><a href="javascript:vform(16,'94.5%','daoguixiaolv','radio');"><span id="daoguixiaolv_16">94.5%</span></span></a>                            </div>
                        </li>
                                    </ul>
            </div>

        </div>

        <div class="selection-box" id="setlist">
            <!-- <a>123<span>X</span></a> -->
        </div>

        <div class="select_center_button">
            <button class="button-search" type="submit">点击筛选</button>
            <button class="button-reset" type="button" onclick="deloptions()">清除已选参数</button>
            <p class="text">当前条件结果:<b>12</b> 个型号<font color="#e55039"> (*请点击左侧按钮进行筛选)</font></p>
        </div>
    </div>
</form>
//点击筛选
    function vform(id,v,form,type){
        var forms="'"+form+"'";
        var vv="'"+v+"'";
        var types="'"+type+"'";
        if(v==''){
            $("."+form).find("span[class='add']").removeClass("add");
            $("input[name='"+form+"']").val('');
            $("#"+form+"_"+id).addClass("add");
            //删除选中
            if(type=='radio'){
               $("#"+form+"s").remove()
            }else if(type=='checkbox'){
                $("."+form+"s").remove()
            }
            return false;
        }
        if(type=='radio'){
          //单选去除所有样式
           $("."+form).find("span[class='add']").removeClass("add");
          //增加选中样式
           $("#"+form+"_"+id).addClass("add");
           //增加选中选项
            if($("#"+form+"s").length>0){
                $("#"+form+"s").html(v+'<span onclick="delval('+id+','+vv+','+forms+','+types+',this)">X</span>');
            }else{
               $("#setlist").append('<a id="'+form+'s">'+v+'<span onclick="delval('+id+','+vv+','+forms+','+types+',this)">X</span></a>');
            }
          //设置选中表单
           $("input[name='"+form+"']").val(v);
        }else if(type=='checkbox'){
            //多选追加&清除
            var vname = $("input[name='"+form+"']").val();
            if(vname==''){
                $("."+form).find("span[class='add']").removeClass("add");
            }
            var fname=vname.split(",");
            var isname = false;
            for (i = 0; i < fname.length; i++) { 
                if(fname[i]==v){
                    isname = true;
                    fname[i]='';
                }
            }
            var vs = '';
            //是否包含
            if(isname==true){
                //去样式
                $("#"+form+"_"+id).removeClass("add");
                //去选中选项
                $("#"+form+"s_"+id).remove()
                //去除
                vs=fname.join(',');
            }else{
                //加样式
                $("#"+form+"_"+id).addClass("add");
                //增加选中选项
                $("#setlist").append('<a class="'+form+'s" id="'+form+'s_'+id+'">'+v+'<span onclick="delval('+id+','+vv+','+forms+','+types+',this)">X</span></a>');
                //增加
                vs=fname.join(',')+','+v;
            }
            vs=vs.replace(',,',',');
            $("input[name='"+form+"']").val(vs);
        }
    }
    //清空选项
    function deloptions(){
        //清除选中样式
        $(".selection-select").find("span[class='add']").removeClass("add");
        //清除选中值
        $("#formhidden input").val("");
        //清除显示选中
        $("#setlist").html('');
    }
    //删除选中
    function delval(id,v,form,type,that=null){
        //删除选中
        if(type=='checkbox'){
            vform(id,v,form,type);
        }else{
             $("."+form).find("span[class='add']").removeClass("add");
             $("input[name='"+form+"']").val('');
        }
        
        if(that!=null){
          //删除显示
          remove(that);
        }
        
    }
     function remove(that) {
        if (that) {
            var node=that.parentNode;
            var parentNode=node.parentNode;
            parentNode.removeChild(node);
        }
    }
阅读 5 编辑于 2021/05/21 00:36