Linux日志
PHP记事本
JS记事本
数据库
团队资讯

全选、反选、提交操作

分类:JS记事本 发布时间:2017-05-30 10:39:44 阅读:作者:郑祥景

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="js/jquery-1.11.3.min.js"></script>

<script>

$(document).ready(function(){

//全选

$('#quanxuan').click(function(){

 panduan = $("#quanxuan").prop("checked");

 if(panduan == true){

 $("input").prop("checked", 'checked');

 }else{

 $("input").prop("checked", false);

}

  })

  //反选

$('#fanxuan').click(function(){

$(".mode input").each(function(){

$(this).prop("checked", !$(this).prop("checked")); 

})

})

  //选项总个数

  num = $(".mode input").size();

  $('#num').text(num);

})

</script>

</head>


<body>


  <p><input type="checkbox" value="全选" id="quanxuan"> 全选</p>

<div class="mode">

<form action="" method="get">

  <p><input type="checkbox" name="mode1" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode2" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode3" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode4" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode5" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode6" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode7" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode8" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode9" value="1"/> I have a car</p>

  <p><input type="checkbox" name="mode10" value="1"/> I have a car</p>

  <p><input type="submit" value="提交" id="submit"></p>

</form>

</div>  

  <p><input type="button" value="反选" id="fanxuan"></p>

<p>选项总个数:<span id="num"></span></p>

<?

for($i=1;$i<=10;$i++){

$getvalue = $_GET['mode'.$i.''];

if(!empty($getvalue)){

      echo "选中了:".$i.";获取的input值:".$getvalue."<br>";

}

}

?>

</body>

</html>


  

   编辑:郑祥景

[随享社区版权所有 未经许可不得转载 ]

返回首页


推荐
Linux日志
PHP记事本
JS记事本
数据库
团队资讯
在线客服随享宝宝
有任何问题,都可以戳我反馈哦!
微信公众号 方便 快速
扫描二维码 关注公众号

版权所有:天妖云/随享社区V5.2 beta Copyright 2015-2019 TIAYO.COM Inc. All rights reserved.