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

最新推荐文章于 2022-03-02 17:51:29 发布

Coder400

最新推荐文章于 2022-03-02 17:51:29 发布

阅读量1k

点赞数 1

分类专栏： PHP 文章标签： javascript ajax checkbox

本文链接：https://blog.csdn.net/qq_35160309/article/details/60959883

版权

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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);
    }