专注于discuz,uchome,dedecms等各类PHP程序仿站(二次开发和模板制作)。

« »

jquery对checkbox(复选框)的操作

今天要用到jquery对checkbox的操作,有全选,反选以及取值。

不说废话,直接上代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
    <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <form id=’che’>
  <input type="checkbox" name="newsletter"  value="1" />1</br>
  <input type="checkbox" name="newsletter" value="2" />2</br>
  <input type="checkbox" name="newsletter"  value="3" />3</br>
  <input type="checkbox" name="newsletter"  value="4" />4</br>
  <input type="checkbox" name="newsletter" value="5" />5</br>
  <input type="checkbox" name="newsletter"  value="6" />6</br>
  <input type="checkbox" name="newsletter"  value="7" />7</br>
  <input type="checkbox" name="newsletter" value="8" />8</br>
  <input type="checkbox" name="all"  id=’convert’ />反选</br>
  <input type="checkbox" name="all"  id=’sel_all’ />全选</br>
  <input type="checkbox" name="all"  id=’get_value’ />取值</br>
</form>

<script type="text/javascript">
$("document").ready(function(){
    $("#convert").change(function(){//反选
      $("input[name='newsletter']").each(function(){
        $(this).attr("checked",!$(this).attr("checked"));
      })
    })
    $("#sel_all").change(function(){//全选
         $("input[name='newsletter']").attr("checked",$(this).attr("checked"));
    })
    $("#get_value").change(function(){
      var str="";
      $("input[name='newsletter']:checked").each(function(){
       str+=$(this).val()+"\r\n";
      })
      alert(str);
    })  
})
</script>
</body>
</html>

原创文章如转载,请注明:转载自火跃工作室
本文网址:http://www.huoyue.org/jquery-checkbox

日志信息 »

该日志于2010-10-11 10:26由 火跃 发表在PHP+mysql分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

没有评论

发表评论 »