Jquery操作select,radio,checkBox,获取选中项的值和文本,根据值和文本设置选中项

   <script src="../Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/ecmascript">
        $(function () {
            //select
            $("#Button1").click(function () {
                var v = $("#selProgram").val();
                alert(v);
            });
            $("#Button2").click(function () {
                var v = $("#selProgram option:selected").text();//表单过滤器 :enabled,:disabled,:checked,:selected
                alert(v);
            });
            $("#Button3").click(function () {
                $("#selProgram option[value='3']").attr("selected", "selected");//属性过滤器,必须是dom已经有了这个属性,比如虽然select有文本值,可以通过text()方法获取到值,但是不可以通过attr("text")获取,因为没有这个属性
            });
            $("#Button4").click(function () {
                $("#selProgram option").each(function () { 
                    if($(this).text()=="Java")
                        $(this).attr("selected", "selected");
                });
            });


            //radio
            $("#Button5").click(function () {
                var v = $(":radio[name='radProgram']:checked").val();
                alert(v);
            });
            $("#Button6").click(function () {
                var v = $(":radio[name='radProgram']:checked").next().text();//表单过滤器 :enabled,:disabled,:checked,:selected
                alert(v);
            });
            $("#Button7").click(function () {
                $(":radio[name='radProgram'][value='3']").attr("checked", "checked");//属性过滤器,必须是dom已经有了这个属性,比如虽然select有文本值,可以通过text()方法获取到值,但是不可以通过attr("text")获取,因为没有这个属性
            });
            $("#Button8").click(function () {
                $(":radio[name='radProgram']").each(function () {
                    if ($(this).next().text() == "Java")
                        $(this).attr("checked", "checked");
                });
            });


            //Checkbox
            $("#chkAll").click(function () {
                $("#divProgram :checkbox").attr("checked", $(this).attr("checked"));
            });
            $("#Button9").click(function () {
                //多个值,直接.val()默认第一个的值
                $("#divProgram :checkbox:checked").each(function () {
                    alert($(this).val());
                });
            });
            $("#Button10").click(function () {
                $("#divProgram :checkbox:checked").each(function () {
                    alert($(this).next().text());
                });
            });
            $("#Button11").click(function () {
                //属性过滤器,必须是dom已经有了这个属性,比如虽然select有文本值,可以通过text()方法获取到值,但是不可以通过attr("text")获取,因为没有这个属性
                $("#divProgram :checkbox[value='2']").attr("checked","checked");
            });
            $("#Button12").click(function () {
                $("#divProgram :checkbox").each(function () {
                    if ($(this).next().text() == "PHP") {
                        $(this).attr("checked", "checked");
                    }
                });
            });
        });
    </script>
    select:<select id="selProgram">
       <option value="1">C#</option>
       <option value="2">Java</option>
       <option value="3">PHP</option>
    </select>
    <input id="Button1" type="button" value="获取选中的value" />
    <input id="Button2" type="button" value="获取选中的text" />
    <input id="Button3" type="button" value="通过value的属性过滤器设置选中项" />
    <input id="Button4" type="button" value="通过文本值设置选中项" />

    <p></p>
    radio:
    <input id="Radio1" type="radio" value="1" name="radProgram" checked="checked" /> <label>C#</label> 
    <input id="Radio2" type="radio" value="2" name="radProgram" /><label>Java</label>
    <input id="Radio3" type="radio" value="3" name="radProgram"/><label>PHP</label>
    <input id="Button5" type="button" value="获取选中的value" />
    <input id="Button6" type="button" value="获取选中的text" />
    <input id="Button7" type="button" value="通过value的属性过滤器设置选中项" />
    <input id="Button8" type="button" value="通过文本值设置选中项" />

    <p></p>
    checkbox:
    <div id="divProgram" style="border:1px gray solid">
        <input id="chkAll" type="checkbox" value="all" /><label>全选</label> 
        <input id="Checkbox1" type="checkbox" value="1" checked="checked"/><label>C#</label> 
        <input id="Checkbox2" type="checkbox" value="2" /><label>Java</label>
        <input id="Checkbox3" type="checkbox" value="3" /><label>PHP</label> 
        <input id="Button9" type="button" value="获取选中的value" />
        <input id="Button10" type="button" value="获取选中的text" />
        <input id="Button11" type="button" value="通过value的属性过滤器设置选中项" />
        <input id="Button12" type="button" value="通过文本值设置选中项" />
    </div>
    <input id="Checkbox4" type="checkbox" />区域外





  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值