zoukankan      html  css  js  c++  java
  • jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关

    http://blog.csdn.net/nairuohe/article/details/6307367

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。

    比如<select class="selector"></select>

    1、设置value为pxx的项选中

         $(".selector").val("pxx");

    2、设置text为pxx的项选中

        $(".selector").find("option[text='pxx']").attr("selected",true);

        这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

    3、获取当前选中项的value

        $(".selector").val();

    4、获取当前选中项的text

        $(".selector").find("option:selected").text();

        这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

    很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

    如:$(".selector1").change(function(){

         // 先清空第二个

          $(".selector2").empty();

         // 实际的应用中,这里的option一般都是用循环生成多个了

          var option = $("<option>").val(1).text("pxx");

          $(".selector2").append(option);

    });

    http://www.cnblogs.com/yaoshiyou/archive/2010/08/24/1806939.html

    jQuery获取Select选择的Text和Value:
    语法解释:
    1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
    2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
    3. var checkValue=$("#select_id").val();  //获取Select选择的Value
    4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
    5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值
    jQuery设置Select选择的 Text和Value:
    语法解释:
    1. $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
    2. $("#select_id ").val(4);   // 设置Select的Value值为4的项选中
    3. $("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中

    jQuery添加/删除Select的Option项:
    语法解释:
    1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
    2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
    3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
    4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
    5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
    5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

    http://www.cnblogs.com/SAL2928/archive/2008/10/28/1321285.html

    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(); 
    下拉框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();//清空下拉框

    在开发中经常会用到Radio来实现用户的选择效果,我在项目中积累了一些利用JQUERY来操作Radio的方法,在这里分享一下,供有需要的朋友借鉴。

    1、改变radio的选择,触发一些效果

    代码如下:
    $("input:radio[name='dialCheckResult']").change(function (){ //拨通
    alert(“123”);
    });

    2、让页面中所有的radio可用。

    $("input:radio").attr("disabled",false);

    3、让页面中所有的radio不可用。

    $("input:radio").attr("disabled","disabled");

    4、让某个radio置于选中状态。

    $("input:radio[name='dialCheckResult']").eq(0).attr("checked",true);

    5、让页面中“未选中”状态的radio不可用。

    $("input:radio:not([checked])").attr("disabled","disabled");

    6、遍历选中状态的radio,除了某一个radio之外,其他的“选中”状态的radio设定是“未选中”状态。

    代码如下:
    $('input:radio:checked').each(function(i,val){
    if(val.name != "dialCheckResult" ){
    $("input:radio[name='"+val.name+"']:checked").attr('checked',false);
    }
    });

    7、让所有“未选中”状态的radio不可用。

    $("input:radio:not([checked])").attr("disabled","disabled");

    8、获得某个选中的特定NAME的radio的值。

    var dialCheckResult=$("input:radio[name='dialCheckResult']:checked").val() ;

    9、让所有“选中”状态的radio置于“未选中”状态。

    $('input:radio:checked').attr('checked',false);

    10、让页面中的radio都置于“选中”状态或“未选中”状态。

    $("input:radio").attr("checked",true);

    $("input:radio").attr("checked",false);

    实例:

    Jquery:

    //页面执行完成执行内容
    jQuery(document).ready(function () {
                //select 默认选择指定的值--学历
                var education = $('#selecteducation').val();
                $(".selector").find("option[value='"+education+"']").attr("selected",true);
                //radio 默认选择--是否婚配
                var maritalstatus = $('#radiomaritalstatus').val();
                if(maritalstatus=='未婚')
                {
                    $("input[name=maritalstatus]:eq(0)").attr("checked",'checked');  //让第一个name为maritalstatus的radio选中
                }else if(maritalstatus=='已婚')
                {
                    $("input[name=maritalstatus]:eq(1)").attr("checked",'checked');
                }
                //radio 默认选择--是否有驾照
                var drivinglicense =$('#radiodrivinglicense').val();
                if(drivinglicense == '有')
                {
                    $("input[name=drivinglicense]:eq(0)").attr("checked",'checked');
                }else if(drivinglicense == '无')
                {
                    $("input[name=drivinglicense]:eq(1)").attr("checked",'checked');
                }
                //radio 默认选择--是否在职
                var job = $('#radiojob').val();
                if(job=='在职')
                {
                    $("input[name=job]:eq(0)").attr("checked",'checked');
                }else if(job=='离职')
                {
                    $("input[name=job]:eq(1)").attr("checked",'checked');
                }
            });

    HTML:

    <div style="position:absolute;1425px;heigth:30px;top:30px;left:100px;font-size:12px">
            <form action='__URL__/updata'>
            <input type='hidden' name='id' value='{$list.id}' />
            <table border="0" cellspacing="1" >
                <caption align='top'><a style="color:#FFFFFF">修改员工信息</a></caption>
                <tr>
                    <td align='right'><a>工号:</a></td>
                    <td><input type='text' name='aid' value='{$list.aid}'  /></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>部门:</a></td>
                    <td><input type='text' name='department' value='{$list.department}'  /></td>
                    <td align='left' style='color:#FF0000' >必须</td>
                </tr>
                <tr>
                    <td align='right'><a>岗位:</a></td>
                    <td><input type='text' name='station'  value='{$list.station}' /></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>入职时间:</a></td>
                    <td><input type='text' name='entry_time'  value='{$list.entry_time}' /></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>姓名:</a></td>
                    <td><input type='text' name='name'  value='{$list.name}' /></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>私人电话:</a></td>
                    <td><input type='text' name='privatephone' value='{$list.privatephone}'  /></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>公司电话:</a></td>
                    <td><input type='text' name='companyphone' value='{$list.companyphone}'  /></td>
                    <td align='left' style='color:#00FF00'>选填</td>
                </tr>
                <tr>
                    <td align='right'><a>身份证:</a></td>
                    <td><input type='text' name='idnumber' value='{$list.idnumber}'  /></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>学历:</a></td>
                    <td>
                        <input type='hidden' id='selecteducation' value='{$list.education}' />
                        <select name='education' style='165px' class='selector' >
                            <option value='本科'>本科</option>
                            <option value='大专'>大专</option>
                            <option value='中专'>中专</option>
                            <option value='高中'>高中</option>
                            <option value='初中'>初中</option>
                            <option value='其他'>其他</option>
                        </select>
                    </td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>婚否:</a></td>
                    <td>
                    <input type='hidden' id='radiomaritalstatus'  value="{$list.maritalstatus}" /><a></a>
                    <span align="left"><input type='radio' name='maritalstatus'  value="未婚" /><a>未婚</a></span>
                    <span align="right"><input type='radio' name='maritalstatus'  value="已婚" /><a>已婚</a></span>
                    </td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>是否有驾照:</a></td>
                    <td>
                    <input type='hidden' id='radiodrivinglicense' value="{$list.drivinglicense}" /><a></a>
                    <input type='radio' name='drivinglicense'  value="有" /><a></a>
                    <input type='radio' name='drivinglicense'  value="无" /><a></a></td>
                    <td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>邮箱:</a></td>
                    <td><input type='text' name='email' value='{$list.email}'/></td><td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='right'><a>是否在职:</a></td>
                    <td>
                    <input type='hidden' id='radiojob'  value="{$list.job}" /><a></a>
                    <input type='radio' name='job'  value="在职" /><a>在职</a>
                    <input type='radio' name='job' value="离职"  /><a>离职</a></td><td align='left' style='color:#FF0000'>必须</td>
                </tr>
                <tr>
                    <td align='center'><input type='submit'  value='保存' onclick='javascript:return confirm("请确认信息无误!");' /></td>
                    <!--<td align='left'><input type='reset'  value='重置' /></td>-->
                </tr>
            </table>
            </form>
            </div>
  • 相关阅读:
    matplotlib 进阶之origin and extent in imshow
    Momentum and NAG
    matplotlib 进阶之Tight Layout guide
    matplotlib 进阶之Constrained Layout Guide
    matplotlib 进阶之Customizing Figure Layouts Using GridSpec and Other Functions
    matplotlb 进阶之Styling with cycler
    matplotlib 进阶之Legend guide
    Django Admin Cookbook-10如何启用对计算字段的过滤
    Django Admin Cookbook-9如何启用对计算字段的排序
    Django Admin Cookbook-8如何在Django admin中优化查询
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/4970975.html
Copyright © 2011-2022 走看看