JavaScript拿到多个CheckBox的选中状态以及ajax的用法

来源：互联网发布：php mysqli连接数据库编辑：程序博客网时间：2024/06/05 02:24

F1：（页面不跳转）：

views代码：

<html><head>    <title>H9N2</title>    <!-- CSS -->    <link rel="stylesheet" href="/themes/css/check_style.css"/>    <!--JavaScript-->    <script type="text/javascript" src="/themes/js/jquery-1.8.2.min.js"></script>    <script type="text/javascript">        $(function () {            $('.sub').click(function () {                //通过document.getElementsByName("check")拿到的是dom节点                var obj = document.getElementsByName("check");                var im = document.getElementsByName("im");                res1 = [];                res2 = [];                //获得选中的CheckBox的value值放在res1[]数组中                for (i in obj) {                    if (obj[i].checked) {                        res1.push(obj[i].value);                    }                }                for (j in im) {                    if (im[j].checked) {                        res2.push(im[j].value);                    }                }//                console.log(obj);//                console.log(obj[0].value,obj[0].checked);                var data = {'check[]': res1, 'im[]': res2};//data是ajax要传递的参数                var url = '/Login/check';                $.ajax({                    type: 'GET',                    data: data,                    url: url,                    success: function (msg) {                        $('.show').html("");                        var html = "诊断结果为:"+"<br>"+"<br>";                        if (msg==0) {                            html = html + "恭喜您，您的鸡舍很安全！";                        }                        else {                            html = html + "很遗憾，您的鸡舍感染了H9N2病毒，请节哀！";                        }                        $('.show').append(html);                    }                });            });        });    </script></head><body><div>        <h1>H9检测</h1>        <span><input type="checkbox" name="check" value="1"> 发病日龄20—30</span>        <span><input type="checkbox" name="check" value="1"> 饮水量降低30%以上,没有其他特殊症状</span>        <span><input type="checkbox" name="check" value="1"> 吃料速度减慢，每天吃料的总量降低20%—70%</span>        <span><input type="checkbox" name="check" value="1"> 小鸡眼睛有眼泪流出，脸部有肿胀</span>        <span><input type="checkbox" name="check" value="1"> 采取3—5天大肠杆菌措施几乎无效</span>        <span><input type="checkbox" name="check" value="1"> 个别鸡群发出怪叫</span>        <span><input type="checkbox" name="im" value="1"> 抽检血清，H9抗体结果高于8，且离散度很高</span>        <span><input type="checkbox" name="im" value="1"> 解剖死亡小鸡的胰腺出现透明的出血点</span>        <span><input type="checkbox" name="check" value="1"> 死亡小鸡的肺部发黑、水肿、气肿</span>        <span><input type="checkbox" name="check" value="1"> 呼吸道疾病传播速度特别快</span>        //此处的input的类型是button        <input type="button"  value="检测"  class="sub" id="sub">         <div class="show"></div></div></body></html>

controllers代码：

<?php/** * Created by PhpStorm. * User: Administrator * Date: 2017/3/8 * Time: 10:09 */class Login extends CI_Controller{    function __construct()    {        parent::__construct();    }    function index()    {        //$this->load->view('login_page');        $this->load->view('check_page');    }    function check()    {        $check1 = $this->input->get('check[]');        $check2 = $this->input->get('im[]');        if (sizeof($check2) > 0) {            echo 1;        } elseif (sizeof($check1) > 2) {            echo 1;        } else {            echo 0;        }    }}

CSS：

body{    background: url("../img/1.jpg");}h1{    text-align: center;}span{    display: block;    margin-top: 10px;    font-size: 20px;    margin-left: 40%;}.sub{    text-align: center;    font-size: 20px;    margin-top: 20px;    margin-left: 48%;}.show{    font-size: 20px;    text-align: center;}

F2：（页面跳转）：

views代码：

<html><head>    <title>H9N2</title>    <!-- CSS -->    <link rel="stylesheet" href="/themes/css/check_style.css"/></head><body><div>    <h1>H9检测</h1>    <form action="/Login/check2" method="post">    //此处name名要起成数组的形式  name="check[]"    <span><input type="checkbox" name="check[]" > 发病日龄20—30</span>    <span><input type="checkbox" name="check[]" > 饮水量降低30%以上,没有其他特殊症状</span>    <span><input type="checkbox" name="check[]" > 吃料速度减慢，每天吃料的总量降低20%—70%</span>    <span><input type="checkbox" name="check[]" > 小鸡眼睛有眼泪流出，脸部有肿胀</span>    <span><input type="checkbox" name="check[]" > 采取3—5天大肠杆菌措施几乎无效</span>    <span><input type="checkbox" name="check[]" > 个别鸡群发出怪叫</span>    <span><input type="checkbox" name="im[]" > 抽检血清，H9抗体结果高于8，且离散度很高</span>    <span><input type="checkbox" name="im[]"> 解剖死亡小鸡的胰腺出现透明的出血点</span>    <span><input type="checkbox" name="check[]"> 死亡小鸡的肺部发黑、水肿、气肿</span>    <span><input type="checkbox" name="check[]" > 呼吸道疾病传播速度特别快</span>     //此处的input的类型是submit    <input type="submit"  value="检测" class="sub" id="sub">    </form></div></body></html>

res view

<html><head>    <title>检测结果</title>    <style>        body {            background-image: url("../../themes/img/1.jpg");            text-align: center;            font-size: 30px;            color: #ff1e28;        }    </style></head><body><h3>检测结果为：</h3><!--根据放入时的key（$a）拿到值--><h3><?php echo $a; ?></h3></body></html>

controllers代码：

   function check2()    {        $check1 = $this->input->post('check[]');        $check2 = $this->input->post('im[]');         /*         * 如果此时你不连续的选中了三个CheckBox就会打印出         * 0,1,2不是你选中的第几个  只是代表有几个是被选中的         * Array ( [0] => on [1] => on [2] => on );         */        print_r($check1);        if (sizeof($check2) > 0) {            //$data是一个容器  要想传递东西就要把要传递的东西放在容器里             $data=array('a'=>'很遗憾，您的鸡舍感染了H9N2病毒，请节哀！');        } elseif (sizeof($check1) > 2) {            $data=array('a'=>'很遗憾，您的鸡舍感染了H9N2病毒，请节哀！');        } else {            $data=array('a'=>'恭喜您，您的鸡舍很安全！');        }        $this->load->view('res',$data);    }

0 0