获取checkbox、select、radio选中的值的方法

淡淡的烟草味﹌ 2022-05-20 05:16 239阅读 0赞

<!DOCTYPE　html>
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    </head>
    <body>
    <form>
    <input type="checkbox"   value="香蕉"  name="fruit">香蕉</input>
    <input type="checkbox"   value="苹果"  name="fruit">苹果</input>
    <input type="checkbox"   value="西瓜"  name="fruit">西瓜</input>
    <input type="checkbox"   value="梨子"  name="fruit">梨子</input>
    <button οnclick="selectCheckBox()" >显示多选框值</button>
    
    <select id="select">
    <option name="kind"  url="www.baidu.com" value="百度">百度文本</option>
    <option name="kind"  url="www.taobao.com" value="淘宝">淘宝文本</option>
    </select>
    <button οnclick="selectOption()" >显示下拉框值</button>
    
    <input type="radio" name="sex" value="男">男</input>
    <input type="radio" name="sex" value="女">女</input>
    <button οnclick="selectRadio()">显示单选框值</button>
    </form>
    
    <script type="text/javascript">
    //获取多选框值 方法一
    function selectCheckBox(){
    $.each($('input[type=checkbox]:checked'),function(){
    alert($(this).val())
    });
    }
    
    //获取多选框值 方法二
    function selectCheckBox(){
    $.each($('input:checkbox'),function(){
    if(this.checked){
    alert($(this).val())
    }
    });
    }
    
    //获取下拉框值  js方法
    function selectOption1(){
    var select=document.getElementById("select");
    var index=select.selectedIndex;
    var value=select.options[index].value;
    var text=select.options[index].text;
    var url=select.options[index].getAttribute('url');
    alert("下拉框索引为:"+index+"值为:"+value+"文本为:"+text+"属性为:"+url)
    }
    
    //获取下拉框值  jquery方法
    function selectOption(){
    var select =$("#select option:selected");
    var value=select.val();
    var text=select.text();
    var url=select.attr('url');
    alert("值为:"+value+"文本为:"+text+"属性为:"+url)
    
    }
    
    
    //显示单选框值
    function  selectRadio(){
    var sex= $('input[type=radio]:checked').val();
    alert("选中的性别为:"+sex);
    }
    </script>
    
    </body>
    </html>