jquery中表单 多选框的一种巧妙写法_jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even");
  $('tbody>tr').click(function(){
    var hasSelected = $(this).hasClass('selected');
    $(this)[hasSelected ? "removeClass" : "addClass"]('selected').find(':checkbox').attr('checked', !hasSelected);
  });
  $('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>s</th>
    <th>sd</th>
    <th>sdasdsa sda</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>s</td>
    <td>s</td>
    <td>sdadsadsd</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>sadasdsd</td>
    <td>s</td>
    <td>sads</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value="" checked='checked'/></td>
    <td>sas</td>
    <td>s</td>
    <td>aasdsad sad</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>ss</td>
    <td>ssad</td>
    <td>dadsadsad</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>Rain</td>
    <td>sd</td>
    <td>sdsad sad asd </td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>MAXMAN</td>
    <td>s</td>
    <td>实打实的速度是</td>
  </tr>
  </tbody>
</table>
</body>
</html>

radio 写法:

$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even");
  $('tbody>tr').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked', true);
  });
// $('table :radio:checked').parent().parent().addClass('selected');
  $('table :radio:checked').parents("tr").addClass('selected');
//$('tbody>tr:has(:checked)').addClass('selected');

})

checkbox写法:

$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even");
  $('tbody>tr').click(function(){
    if($(this).hasClass('selected')){
      $(this).removeClass('selected').find(':checkbox').attr('checked', false);
    }else{
      $(this).addClass('selected').find(':checkbox').attr('checked', true);
    }
  });
// $('table :checkbox:checked').parent().parent().addClass('selected');
  $('table :checkbox:checked').parents("tr").addClass('selected');
  //$('tbody>tr:has(:checked)').addClass('selected');
})

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索表单
多选框
form表单提交多选框、表单多选框、php多选提交表单、select2 多选提交表单、多选表单,以便于您获取更多的相关知识。

时间: 2024-12-27 12:39:30

jquery中表单 多选框的一种巧妙写法_jquery的相关文章

jquery判断checkbox(复选框)是否被选中的代码_jquery

复制代码 代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $("input[name='soft[]']:checkbox").each(function () { if ($(this).attr("checked")) { falg += 1; } }) if (falg > 0) return true; else return fals

jquery判断单个复选框是否被选中的代码_jquery

<input type="checkbox" id="cr" /><label for="cr">我已经阅读</label> a 用DOM方式来判断是否被选中 复制代码 代码如下: $(function(){ var $cr = $("#cr"); var cr =$cr[0]; $cr.click(function(){ if(cr.checked){ alert("谢谢注册&q

总结:表单复选框向PHP传输数据的研究

表单复选框就是checkbox 1.checkbox的应用    <input type="checkbox" name="ch" value="2"> 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量:    <?php       for($i=0;$i<10;$i++){   ?>    <input type="checkbox" name="ch[]

jQuery切换所有复选框选中状态的方法

  本文实例讲述了jQuery切换所有复选框选中状态的方法.分享给大家供大家参考.具体如下: 这段代码非常简单实用,通过链接切换所有checkbox是否选中 ? 1 2 3 4 5 6 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog;

jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

 本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选.反选实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery判断checkbox(复选框)是否被选中: if($("#id").attr("checked")==true)   jQuery实现checkbox(复选框)选中.全选/反选代码:    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jquery自动填充勾选框即把勾选框打上true

 jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上 jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上.  代码如下: 下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'>  <opt

jQuery切换所有复选框选中状态的方法_jquery

本文实例讲述了jQuery切换所有复选框选中状态的方法.分享给大家供大家参考.具体如下: 这段代码非常简单实用,通过链接切换所有checkbox是否选中 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 希望本文所述对大家的jq

jquery获取到复选框选中的值,值为数值类型,怎样通过ajax 传到后台,后台怎样接送

问题描述 jquery获取到复选框选中的值,值为数值类型,怎样通过ajax 传到后台,后台怎样接送 求救,困扰了一天了, 急急急急急急急急急急急急,这个问题描述也太坑了吧. 解决方案 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> function getCheck(){ var

表单复选框向PHP传输数据的代码_php技巧

表单复选框就是checkbox 1.checkbox的应用  复制代码 代码如下:    <input type="checkbox" name="ch" value="2">  2.由于我传输的是在php循环中产生的数组,因此value也要设成变量:     <?php         for($i=0;$i<10;$i++){     ?>      <input type="checkbox&q