zoukankan      html  css  js  c++  java
  • checkbox,radio,selected相关操作

    1、radio:单选框

           HTML代码:

    1. <input type="radio" name="radio" id="radio1" value="1" />1    
    2. <input type="radio" name="radio" id="radio2" value="2" />2    
    3. <input type="radio" name="radio" id="radio3" value="3" />3    
    4. <input type="radio" name="radio" id="radio4" value="4" />4    

            js操作代码:

    1. jQuery("input[type='radio'][name='radio']:checked").length == 0 ? "没有任何单选框被选中" : "已经有选中";    
    2. jQuery('input[type="radio"][name="radio"]:checked').val(); // 获取一组radio被选中项的值    
    3. jQuery("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");// 设置value = 2的一项为选中    
    4. jQuery("#radio2").attr("checked", "checked"); // 设置id=radio2的一项为选中    
    5. jQuery("input[type='radio'][name='radio']").get(1).checked = true; // 设置index = 1,即第二项为当前选中    
    6. var isChecked = jQuery("#radio2").is(":checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;    
    7. var isChecked = jQuery("input[type='radio'][name='radio'][value='2']").is(":checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;    

    2、checkbox:复选框

           HTML代码:

    1. <input type="checkbox" name="checkbox" id="checkAll" />全选/取消全选    
    2. <input type="checkbox" name="checkbox" id="checkbox_id1" value="1" />1    
    3. <input type="checkbox" name="checkbox" id="checkbox_id2" value="2" />2    
    4. <input type="checkbox" name="checkbox" id="checkbox_id3" value="3" />3    
    5. <input type="checkbox" name="checkbox" id="checkbox_id4" value="4" />4    
    6. <input type="checkbox" name="checkbox" id="checkbox_id5" value="5" />5    

           js操作代码:

    1. var val = jQuery("#checkbox_id1").val();// 获取指定id的复选框的值    
    2. var isSelected = jQuery("#checkbox_id3").attr("checked"); // 判断id=checkbox_id3的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false;    
    3. jQuery("#checkbox_id3").attr("checked", true);// or    
    4. jQuery("#checkbox_id3").attr("checked", 'checked');// 将id=checkbox_id3的那个复选框选中,即打勾    
    5. jQuery("#checkbox_id3").attr("checked", false);// or    
    6. jQuery("#checkbox_id3").attr("checked", '');// 将id=checkbox_id3的那个复选框不选中,即不打勾    
    7. jQuery("input[name=checkbox][value=3]").attr("checked", 'checked');// 将name=checkbox, value=3 的那个复选框选中,即打勾    
    8. jQuery("input[name=checkbox][value=3]").attr("checked", '');// 将name=checkbox, value=3 的那个复选框不选中,即不打勾    
    9. jQuery("input[type=checkbox][name=checkbox]").get(2).checked = true;// 设置index = 2,即第三项为选中状态    
    10. jQuery("input[type=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值    
    11.     alert(jQuery(this).val());    
    12. });    
    13. // 全选/取消全选    
    14. jQuery(function() {    
    15.     jQuery("#checkAll").click(function(){    
    16.             if(jQuery(this).attr("checked") == true){// 全选    
    17.                 jQuery("input[type=checkbox][name=checkbox]").each(function(){    
    18.                         jQuery(this).attr("checked", true);    
    19.                     });    
    20.             } else {// 取消全选    
    21.                 jQuery("input[type=checkbox][name=checkbox]").each(function(){    
    22.                     jQuery(this).attr("checked", false);    
    23.                 });    
    24.             }    
    25.         });    
    26. });    

      3、select:下拉框

           HTML代码:

    1. <select name="select" id="select_id" style=" 100px;">    
    2.     <option value="1">11</option>    
    3.     <option value="2">22</option>    
    4.     <option value="3">33</option>    
    5.     <option value="4">44</option>    
    6.     <option value="5">55</option>    
    7.     <option value="6">66</option>    
    8. </select>   

           js操作代码:

    1. /**  
    2.  * jQuery获取select的各种值  
    3.  */    
    4. jQuery("#select_id").change(function(){                         // 1.为Select添加事件,当选择其中一项时触发     
    5.     //code...    
    6. });    
    7. var checkValue = jQuery("#select_id").val();                    // 2.获取Select选中项的Value    
    8. var checkText = jQuery("#select_id :selected").text();          // 3.获取Select选中项的Text     
    9. var checkIndex = jQuery("#select_id").attr("selectedIndex");    // 4.获取Select选中项的索引值,或者:jQuery("#select_id").get(0).selectedIndex;    
    10. var maxIndex = jQuery("#select_id :last").attr("index");        // 5.获取Select最大的索引值,或者:jQuery("#select_id :last").get(0).index;    
    11. /**  
    12.  * jQuery设置Select的选中项  
    13.  */    
    14. jQuery("#select_id").get(0).selectedIndex = 1;                  // 1.设置Select索引值为1的项选中    
    15. jQuery("#select_id").val(4);                                    // 2.设置Select的Value值为4的项选中    
    16. /**  
    17.  * jQuery添加/删除Select的Option项  
    18.  */    
    19. jQuery("#select_id").append("<option value='新增'>新增option</option>");    // 1.为Select追加一个Option(下拉项)     
    20. jQuery("#select_id").prepend("<option value='请选择'>请选择</option>");   // 2.为Select插入一个Option(第一个位置)    
    21. jQuery("#select_id").get(0).remove(1);                                      // 3.删除Select中索引值为1的Option(第二个)    
    22. jQuery("#select_id :last").remove();                                        // 4.删除Select中索引值最大Option(最后一个)     
    23. jQuery("#select_id [value='3']").remove();                                  // 5.删除Select中Value='3'的Option     
    24. jQuery("#select_id").empty();                                               // 6.清空下拉列表

    来自:http://www.cnblogs.com/merlini/archive/2013/05/21/3090165.html

  • 相关阅读:
    MySql 用户 及权限操作
    MAC 重置MySQL root 密码
    在mac系统安装Apache Tomcat的详细步骤[转]
    Maven:mirror和repository 区别
    ES6 入门系列
    转场动画CALayer (Transition)
    OC 异常处理
    Foundation 框架
    Enum枚举
    Invalid App Store Icon. The App Store Icon in the asset catalog in 'xxx.app' can’t be transparent nor contain an alpha channel.
  • 原文地址:https://www.cnblogs.com/115FXC/p/4014999.html
Copyright © 2011-2022 走看看