zoukankan      html  css  js  c++  java
  • jquery 操作复选框 下拉框

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    5. <title>louis-blog >> jQuery 对checkbox的操作</title>  
    6. <script type='text/javascript' src="jquery.js"></script>  
    7. <SCRIPT LANGUAGE="JavaScript">  
    8. <!--  
    9. $("document").ready(function(){  
    10. $("#btn1").click(function(){  
    11. $("[name='checkbox']").attr("checked",'true');//全选  
    12. })  
    13. $("#btn2").click(function(){  
    14. $("[name='checkbox']").removeAttr("checked");//取消全选  
    15. })  
    16. $("#btn3").click(function(){  
    17. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
    18. })  
    19. $("#btn4").click(function(){  
    20. $("[name='checkbox']").each(function(){//反选  
    21. if($(this).attr("checked")){  
    22. $(this).removeAttr("checked");  
    23. }  
    24. else{  
    25. $(this).attr("checked",'true');  
    26. }  
    27. })  
    28. })  
    29. $("#btn5").click(function(){//输出选中的值  
    30. var str="";  
    31. $("[name='checkbox'][checked]").each(function(){  
    32. str+=$(this).val()+"\r\n";  
    33. //alert($(this).val());  
    34. })  
    35. alert(str);  
    36. })  
    37. })  
    38. -->  
    39. </SCRIPT>  
    40. </HEAD>  
    41. <body style="text-align:center;margin: 0 auto;font-size: 12px;">  
    42. <div style="border: 1px solid #999; 500px; padding: 15px; background: #eee; margin-top: 150px;">  
    43. <form name="form1" method="post" action="">  
    44. <input type="button" id="btn1" value="全选">  
    45. <input type="button" id="btn2" value="取消全选">  
    46. <input type="button" id="btn3" value="选中所有奇数">  
    47. <input type="button" id="btn4" value="反选">  
    48. <input type="button" id="btn5" value="获得选中的所有值">  
    49. <br><br>  
    50. <input type="checkbox" name="checkbox" value="checkbox1">  
    51. checkbox1val  
    52. <input type="checkbox" name="checkbox" value="checkbox2">  
    53. checkbox2val 
    54. <input type="checkbox" name="checkbox" value="checkbox3">  
    55. checkbox3val 
    56. <input type="checkbox" name="checkbox" value="checkbox4">  
    57. checkbox4val  
    58. <input type="checkbox" name="checkbox" value="checkbox5">  
    59. checkbox5val  
    60. <input type="checkbox" name="checkbox" value="checkbox6">  
    61. checkbox6val  
    62. </form>  
    63. </div>  
    64. </body>  
    65. </HTML> 

    1,下拉框:

    var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)

    var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值

    var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值

    $("#select").empty();//清空下拉框//$("#select").html('');

    $("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

    稍微解释一下:

    1.select[@name='country'] option[@selected] 表示具有name 属性,

    并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;

    可以看出有@开头的就表示后面跟的是属性。

    2,单选框:

    $("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)

    $("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

    3,复选框:

    $("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值

    $("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出

       alert($(this).val());

       });

    $("#chk1").attr("checked",'');//不打勾

    $("#chk2").attr("checked",true);//打勾

    if($("#chk1").attr('checked')==true){} //判断是否已经打勾

    当然jquery的选择器是强大的. 还有很多方法.

    另外我自己也写过一个jquery的复选框小插件.嘿嘿.可以参考参考.

    http://www.cssrain.cn/demo/jquery-check/checkbox.html

    <script src="jquery-1.2.1.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

    $(document).ready(function(){

    $("#selectTest").change(function()

    {

           //alert("Hello");

           //alert($("#selectTest").attr("name"));

           //$("a").attr("href","xx.html");

           //window.location.href="xx.html";

           //alert($("#selectTest").val());

           alert($("#selectTest option[@selected]").text());

           $("#selectTest").attr("value", "2");

    });

    });

    </script>

    <a href="#">aaass</a>

    <!--下拉框-->

    <select id="selectTest" name="selectTest">

    <option value="1">11</option>

    <option value="2">22</option>

    <option value="3">33</option>

    <option value="4">44</option>

    <option value="5">55</option>

    <option value="6">66</option>

    </select>

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值

    var item = $('input[@name=items][@checked]').val();

    获取select被选中项的文本

    var item = $("select[@name=items] option[@selected]").text();

    select下拉框的第二个元素为当前选中值

    $('#select_id')[0].selectedIndex = 1;

    radio单选组的第二个元素为当前选中值

    $('input[@name=items]').get(1).checked = true;

    获取值:

    文本框,文本区域:$("#txt").attr("value");

    多选框checkbox:$("#checkbox_id").attr("value");

    单选组radio: $("input[@type=radio][@checked]").val();

    多组单选按钮:$("input[@typ=radio][@name=''][@checked]")

    下拉框select: $('#sel').val();

    控制表单元素:

    文本框,文本区域:$("#txt").attr("value",'');//清空内容

                    $("#txt").attr("value",'11');//填充内容

    多选框checkbox: $("#chk1").attr("checked",'');//不打勾

                    $("#chk2").attr("checked",true);//打勾

                    if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

    单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

    下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

                $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option

                $("#sel").empty();//清空下拉框

    获取一组radio被选中项的值

    var item = $('input[@name=items][@checked]').val();

    获取select被选中项的文本

    var item = $("select[@name=items] option[@selected]").text();

    select下拉框的第二个元素为当前选中值

    $('#select_id')[0].selectedIndex = 1;

    radio单选组的第二个元素为当前选中值

    $('input[@name=items]').get(1).checked = true;

    获取值:

    文本框,文本区域:$("#txt").attr("value");

    多选框checkbox:$("#checkbox_id").attr("value");

    单选组radio: $("input[@type=radio][@checked]").val();

    下拉框select: $('#sel').val();

    控制表单元素:

    文本框,文本区域:$("#txt").attr("value",'');//清空内容

    $("#txt").attr("value",'11');//填充内容

    多选框checkbox: $("#chk1").attr("checked",'');//不打勾

    $("#chk2").attr("checked",true);//打勾

    if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

    单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

    下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

    $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option

    $("#sel").empty();//清空下拉框

  • 相关阅读:
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    软件工程实践总结
  • 原文地址:https://www.cnblogs.com/YuanShuai/p/2370044.html
Copyright © 2011-2022 走看看