当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jQuery获取select checkbox值简单示例

发表于: 2014-05-12   作者:53873039oycg   来源:转载   浏览:
摘要:       用jQuery写的一个小例子,例子参考了博客http://www.cnblogs.com/babycool/p/3302904.html,欢迎吐槽,上例子:      <!DOCTYPE html> <html> <head> <meta ch

      用jQuery写的一个小例子,例子参考了博客http://www.cnblogs.com/babycool/p/3302904.html,欢迎吐槽,上例子

    

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 操作select radio checkbox</title>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
   <script>
        $(function () {
            //checkbox获取选中项
            $('#checkbox_huoqu').click(function () {
                $('#checkbox_result_div').html("");
                $("#checkbox_div input[type='checkbox']:checked").each(function () {
                    $('#checkbox_result_div').append(this.value + "  ");
                });
            });


            //checkbox全选/取消全选
            $('#checkbox_checkall').click(function(){
                $("#checkbox_div input[type='checkbox']").prop("checked",$(this).prop("checked"));
            });

            //checkbox反选
            $('#checkbox_fanxuan').click(function () {
            	$('#checkbox_result_div').html("");
            	$("#checkbox_checkall").removeAttr("checked");
                $("#checkbox_div input[type='checkbox']").each(function () {
                    if ($(this).prop("checked")) {
                        $(this).removeAttr("checked");
                    } else {
                        $(this).prop("checked", 'true');
                    }
                });
            });
            
            //选中checkbox第2项的值
            $('#checkbox_setvalue').click(function () {
            	 $('#checkbox_result_div').html("");
            	 $("#checkbox_checkall").removeAttr("checked");
            	 $("#checkbox_div input[type='checkbox']").removeAttr("checked");
            	 $("#checkbox_div input[type='checkbox'][value='2']").prop("checked","true");
            });
          
            //获取select选中的值
            $('#select_huoqu').click(function () {
                $('#select_result_div').html("");
                var checkText=$("#select_id").find("option:selected").text();
                var checkValue=$("#select_id").find("option:selected").val(); //获取Select选择的Value
                $('#select_result_div').html("select选择的text:"+checkText+" value="+checkValue);
            });
            
          //选中select选中的值
           $('#select_setvalue').click(function () {
              $('#select_result_div').html("");
              $("#select_id").val(2); 
              //$("#select_id option[value='3']").prop("selected", true); //设置Select的Value值为2的项选中 
           });
          
         //获取radio选中的值
           $('#radio_huoqu').click(function () {
           	 $('#radio_result_div').html("");
           	 var checkValue=$("#radio_div input[type='radio']:checked").val(); //获取Select选择的Value
           	 $('#radio_result_div').html("radio选择的value="+checkValue);
           });
           
         //选中radio选中的值
          $('#radio_setvalue').click(function () {
			 $('#radio_result_div').html("");
			 $("#radio_div input[type='radio'][value='2']").prop("checked",true);
			});
		 });
</script>
</head>
<body>
	<div id="select_div">
	    <p>参考了博客:http://www.cnblogs.com/babycool/p/3302904.html</p>
		<select id="select_id" placeholder="请选择">
			<option value="" disabled selected style='display: none;'>请选择</option> 
			<option value="1">波音</option>
			<option value="2">天宇</option>
			<option value="3">苹果</option>
			<option value="4">三星</option>
		</select>
	</div>
	<div id="select_oper_div">
        <input type="button" id="select_huoqu" value="获取选中项" />
        <input type="button" id="select_setvalue" value="选中第2项" />
    </div>
	<div id="select_result_div">&nbsp;</div>
	
	<div>&nbsp;</div>
	<div>&nbsp;</div>
	<div id="checkbox_div">
        <input type="checkbox" name="grade" value="1" id="in1" checked="checked" /><label for="in1">一年级</label>
        <input type="checkbox" name="grade" value="2" id="in2" /><label for="in2">二年级</label>
        <input type="checkbox" name="grade" value="3" id="in3" /><label for="in3">三年级</label>
        <input type="checkbox" name="grade" value="4" id="in4" /><label for="in4">四年级</label>
        <input type="checkbox" name="grade" value="5" id="in5" /><label for="in5">五年级</label>
        <input type="checkbox" name="grade" value="6" id="in6" /><label for="in6">六年级</label>
        <input type="checkbox" name="grade" value="7" id="in7" /><label for="in7">七年级</label>
        <input type="checkbox" name="grade" value="8" id="in8" /><label for="in8">八年级</label>
    </div>
    <div id="checkbox_oper_div">
        <input type="checkbox" id="checkbox_checkall" /><label for="checkbox_checkall">全选/取消全选</label>
        <input type="button" id="checkbox_fanxuan" value="反选" />
        <input type="button" id="checkbox_huoqu"  value="获取选中项" />
        <input type="button" id="checkbox_setvalue" value="选中第2项" />
    </div>
    <div id="checkbox_result_div">&nbsp;</div>
    <div>&nbsp;</div>
	<div>&nbsp;</div>
	<div id="radio_div">
	   <input type="radio" name="grade" value="1" id="in1" checked="checked" /><label for="in1">一年级</label>
       <input type="radio" name="grade" value="2" id="in2" /><label for="in2">二年级</label>
       <input type="radio" name="grade" value="3" id="in3" /><label for="in3">三年级</label>
       <input type="radio" name="grade" value="4" id="in4" /><label for="in4">四年级</label>
       <input type="radio" name="grade" value="5" id="in5" /><label for="in5">五年级</label>
       <input type="radio" name="grade" value="6" id="in6" /><label for="in6">六年级</label>
       <input type="radio" name="grade" value="7" id="in7" /><label for="in7">七年级</label>
       <input type="radio" name="grade" value="8" id="in8" /><label for="in8">八年级</label>
	</div>
	<div id="radio_oper_div">
        <input type="button" id="radio_huoqu" value="获取选中项" />
        <input type="button" id="radio_setvalue" value="选中第2项" />
    </div>
	<div id="radio_result_div">&nbsp;</div>
	
    <div>&nbsp;</div>
	<div>&nbsp;</div>
</body>
</html>

    全文完。

jQuery获取select checkbox值简单示例

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery获取checkbox选中的值 1、问题背景 有几个多选框,选择其中的几个,获取选中的值 2、设计源码
有在网上看到一个问题,就是尝试去获取Checkbox的值。技术难度并不高,不过有时间,还是做做练习。
第一部分 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")
[开发笔记]-jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进
$(document).ready(function(){ $('#addto').click(function(){ var $options = $('#select1 option
文章源自:http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-exampl
今天做项目时,遇到获取下拉框选项的值,发现一个没太注意的问题,下面来记录一下。 下拉框代码: &
今天做项目时,遇到获取下拉框选项的值,发现一个没太注意的问题,下面来记录一下。 下拉框代码: &
今天做项目时,遇到获取下拉框选项的值,发现一个没太注意的问题,下面来记录一下。 下拉框代码: &
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号