jQuery获取select checkbox值简单示例

最新推荐文章于 2024-05-11 12:12:57 发布

oy538730875

最新推荐文章于 2024-05-11 12:12:57 发布

阅读量104

点赞数

分类专栏： jQuery 文章标签： jQuery ViewUI

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

用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>

全文完。