在选择框内的复选框中如何获取选中的值?

时间:2013-02-16 04:38:23

标签: javascript jquery html

这是我的代码我试图从选中的框中打印选定的值。但它只打印所选项目的第一个值。我不知道如何获取所选值的长度。任何一个帮我解决这个问题

<html>
    <head>
        <title>jQuery Dropdown CheckList</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.13.custom.css">
        <link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.themeroller.css">
        <style>
    table td { vertical-align: top }
    dd { padding-bottom: 15px }
        </style>

        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
        <script type="text/javascript" src="ui.dropdownchecklist-1.4-min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
              $("#s10").dropdownchecklist( { forceMultiple: true
    , onComplete: function(selector) {
        var values = "";
        for( i=0; i < selector.options.length; i++ )
        {
            if (selector.options[i].selected && (selector.options[i].value != "")) 
            {
                if ( values != "" ) 
                  values += ";";
                values += selector.options[i].value;            
            }

        }
        alert(values);
        } 
    , onItemClick: function(checkbox, selector)
       {
         var justChecked = checkbox.prop("checked");
         var checkCount = (justChecked) ? 1 : -1;
         for( i = 0; i < selector.options.length; i++ ){
            if (selector.options[i].selected )
              checkCount += 1;
        }


       }
      });
    });
        </script>  
    </head>
    <body>
    <div id="content">
      <table>
          <tr>
            <td>
                <select id="s10">
                    <option value=""></option>
                    <option value='a'>Alice</option>
                    <option value='b'>Bob</option>
                    <option value='c'>Christian</option>
                    <option value='d'>Daniel</option>
                    <option value='e'>Elizabeth</option>
                </select>
             </td>
           </tr>
        </table>  
    </div>
    </body>
    </html>

取得复选框所选项目的长度我做了这个,但我不知道它只给1作为警报信息

onItemClick: function (checkbox, selector) 
                 {
                   $("input:checked").each(function()
                   {        
                         alert($(this).val().length);    
                   });         
                 } });  

3 个答案:

答案 0 :(得分:1)

使用:selected获取所选选项:

$('#s10 option:selected').val();

我想说的是:http://jsfiddle.net/T4UDu/

$('#s10').change(function(){
    alert($('option:selected',this).val());
});

答案 1 :(得分:1)

试试这个,希望它会起作用

<select id="s10" multiple="multiple">

    <script type="text/javascript">
        $(document).ready(function() {
        var foo = []; 
        $('#s10:selected').each(function(i, selected){ 
          foo[i] = $(selected).text(); 
        });
      });
   </script>  

答案 2 :(得分:0)

$('#checkboxId').change(function(){
    alert($('option:selected',this).val());
});