JQ 全选设定与设置选中

时间：2023-03-08 20:19:28

复选数据框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<div>全选<input type="checkbox" id="qx" /></div>

<div>

植物园<input type="checkbox" class="ck" value="植物园" />

公园<input type="checkbox" class="ck" value="公园" />

医院<input type="checkbox" class="ck" value="医院" />

餐厅<input type="checkbox" class="ck" value="餐厅" />

</div><br />

<div><input type="button" value="取值" id="btn" /></div><br />

<div>

请输入区域:<input type="text" id="qy" />

<input type="button" value="设置选中" id="szxz" />

</div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#qx").click(function(){

        //找到全选按钮的选中状态

        var xz=$(this).prop("checked");

        //将复选框列表里面所有的复选框的选中状态变为全选的选择状态

        $(".ck").prop("checked",xz);

        })

        $("#btn").click(function(){

            var ck=$(".ck");

            for(var i=0;i<ck.length;i++)

            {

                //取JQUERY对象

                //ck.eq(i).prop("checked");

                //取DOM对象

                //ck[i].checked

                if(ck.eq(i).prop("checked"))

                {

                    alert(ck.eq(i).val());

                }

            }

            })

    $("#szxz").click(function(){

        //获取用户输入的值

        var qy=$("#qy").val();

        //设置选中

        var ck=$(".ck");

        ck.prop("checked",false);

        for(var i=0;i<ck.length;i++)

        {

            if(ck.eq(i).val()==qy)

            {

                ck.eq(i).prop("checked",true);

            }

        }

        })        

});

</script>

</html>

单选数据框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<div>

植物园<input type="radio" name="qy" class="ck" value="植物园" />

公园<input type="radio" name="qy" class="ck" value="公园" />

医院<input type="radio" name="qy" class="ck" value="医院" />

餐厅<input type="radio" name="qy" class="ck" value="餐厅" />

</div><br />

<div><input type="button" value="取选中值" id="btn" /></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

        var ck=$(".ck");

        //利用for循环输出

        for(var i=0;i<ck.length;i++)

        {

                if(ck.eq(i).prop("checked"))

                {

                    alert(ck.eq(i).val());

                }

        }

        })

});

</script>

</html>

下拉数据条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<select id="qy">

<option value="1">所有</option>

<option value="植物园">植物园</option>

<option value="公园">公园</option>

<option value="医院">医院</option>

<option value="餐厅">餐厅</option>

</select>

<input type="button" value="取选中值" id="btn" /><br />

<div>请输入：

<input type="text" id="zhi" />

<input type="button" value="设置选中" id="szxz" />

</div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

        alert($("#qy").val());

        })

    $("#szxz").click(function(){

        var zhi=$("#zhi").val();

        var op=$("option");

        /*for(var i=0;i<op.length;i++)

        {

            //op.eq(i).prop("selected");

            if(op.eq(i).val()==zhi)

            {

                op.eq(i).prop("selected",true);

            }

        }*/

        $("#qy").val(zhi);

        })

});

</script>

</html>

相关文章