Blogger Information
Blog 2
fans 0
comment 0
visits 2499
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
tp3.2如何处理多选框传参和判断状态
一念永恒的博客
Original
1697 people have browsed it
  1. 创建多选框:

    (1)普通的多选:

    <label><input type="checkbox" value="1"/>1</label>

   <label><input type="checkbox" value="2"/>2</label>

   <label><input type="checkbox" value="3"/>3</label>

    (2)在数据库中遍历出来的多选框,value和data-id都要赋值(大家都懂,我就不说啦):

  <foreach name="item" item="vo">

        <input type="checkbox" id="hstype" class="h{$vo.hsid}" name="hstype" value="{$vo.hsid}" data-id="{$vo.hsid}">{$vo.title} <br>

   </foreach>

2.我是用jq做的异步,我是使用英文“,”分割字段存储的。我们的前端是自己封装过的,大家根据自己的需求修改,我直接上源码吧:

<script type="text/javascript">

    var editDataURl='{:U("HH/hstyleHH")}';

    var hid="{$pvo['hid']}";

    seajs.use(['$','main'],function($,main){

        $('.savebtn').click(function(e){

            e.preventDefault();

            var str = "";

            jQuery("[name='hstype']:checked").each(function () {

            str += jQuery(this).val() + ",";

       })

    var hstype = str.substring(0, str.length - 1);

    if(hstype == ''){

        alert("必选");return false;

    }

    main.post(editDataURl,{hid:hid,hstype:hstype},function(rda){

        if(rda.status==1){

            alert(rda.info);location.reload();

        }else{

              alert(rda.info);

        }

    })

})

})

</script>

3.传参的以英文逗号分割的字符串储存,下一步就是我们的取出,虽然在后端也可以处理,但是我比较喜欢在前端使用jq处理,我认为比较方便。checkbox是使用.prop("check",true|false)做判断,为什么使用这个,不懂自行百度,我这就不多说了:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!--资源引入,否则不生效-->

<script type="text/javascript">

//$(".h7").prop("checked", true);//先测试一下.prop()是否正常工作,我的习惯无需理会,有人会问h7是怎么来的,你们可以看看我遍历的checkbox的class命名,哈哈哈

$(document).ready(function(){

    var str = "{$pvo['hstype']}";//把查询的数据直接赋值,不需要再后端处理什么,直接把以逗号分割的字符串拿来

   //下面就是对字符串分割,然后遍历,判断状态有几种方法,我就随便搞两种吧

   $(str.split(",")).each(function (i,dom){

         //$(":checkbox[value='"+dom+"']").prop("checked",true);//1.根据value值来判断,最直接的

        $(":checkbox[data-id='"+dom+"']").prop("checked",true);//2.根据data-id值来判断,我比较喜欢用的一种方法

   });

});

</script>


    就是这样,我虽然是菜鸟,写的不好,老鸟勿喷,谢谢大家,希望对大家的学习会有帮助  ~   -_-



Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post