>

jquery表单插件form使用办法详解

- 编辑:乐百家599手机首页 -

jquery表单插件form使用办法详解

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>

图片 1

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');
})

多选框的一种高超写法,jquery表单 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xmlns=...

jQuery完成下拉框左右运动(全体活动,已选移动),jquery下拉框

用到的措施为:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被选成分的末段(照旧在内部)插入钦命内容。
click() 方法触发 click 事件,或规定当发生 click 事件时运转的函数。

看一下切实可行落到实处的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#add").click(function () {
      //1,方式一
//        var $option = $("#select1 option:selected");  //获取选中的选项
//        var $remove = $option.remove(); //删除下拉列表中选中的选项
//        $remove.appendTo("#select2");  //追加给对方
        //2,方式二
        var $option = $("#select1 option:selected");  //获取选中的选项
        $option.appendTo("#select2");  //追加给对方
      });
      $("#add_all").click(function () {
        var $option = $("#select1 option");
        $option.appendTo("#select2");
      });
      $("#remove").click(function () {
        var $option = $("#select2 option:selected");
        $option.appendTo("#select1");
      });
      $("#remove_all").click(function () {
        var $option = $("#select2 option");
        $option.appendTo("#select1");
      });
    });
  </script>
</head>
<body>
<h3>下拉框应用</h3>
  <table>
    <tr>
      <td>
        <select id="select1" multiple="multiple" style="width:100px;">
          <option value="News">News</option>
          <option value="Sport">Sport</option>
          <option value="Education">Education</option>
          <option value="Technology">Technology</option>
          <option value="Art">Art</option>
        </select>
      </td>
      <td>
        <button id="add">
          >|</button><br />
        <button id="add_all">
          >></button><br />
        <button id="remove_all">
          <<</button><br />
        <button id="remove">
          |<</button>
      </td>
      <td>
        <select id="select2" multiple="multiple" style="width:100px;">
        </select>
      </td>
    </tr>
  </table>
</body>
</html>

运转效果:

图片 2

图片 3

您可能感兴趣的小说:

  • js和jquery分别证实单选框、复选框、下拉框
  • JQuery推断radio(单选框)是不是选仲春获取选中值方法计算
  • jquery单选框radio绑定click事件实现情势
  • jQuery对下拉框,单选框,多选框的操作
  • jquery对单选框,多选框,文本框等周围操作小结
  • jquery操作下拉列表、文本框、复选框、单选框会集(收藏)
  • Jquery为单选框checkbox绑定单击click事件
  • jquery 操作单选框,复选框,下拉列表达成代码
  • jQuery遍历Form示例代码
  • jQuery插件form-validation-engine正则表明式操作示例
  • jQuery表单插件ajaxForm实例详解
  • jQuery Form表单取值的措施
  • jQuery轻巧贯彻遍历单选框的不二等秘书技

你只怕感兴趣的篇章:

  • jquery select多选框的左右平移 具体贯彻代码
  • Jquery多选框互相内容交流的实例代码
  • jquery对单选框,多选框,文本框等常见操作小结
  • jQuery对下拉框,单选框,多选框的操作
  • jQuery完毕的多选框多级联合浮动插件
  • JQuery塑造省市下拉框联合浮动作效果应
  • jQuery操作select下拉框的text值和value值的措施
  • 依照jquery达成的可编制下拉框完成代码
  • jQuery制作轻便的连串联合浮动Select下拉框
  • jQuery easyui中的combobox达成下拉框特效
  • JQuery select(下拉框)操作方法汇总
  • jquery中表单 多选框的一种高超写法

用到的格局为:appendTo() 格式:$(content).appendTo(selector) appendTo() 方法在被选...

checkbox写法:

其次种方法

radio 写法:

运用这种提交格局,可以达成异步表单提交,很有益于。但是,依旧有一点点不满足,比如说,作者大概想在付出表单以前验证一下,即使可以手动地在付给表单动作之外完成,可是很麻烦。form插件有未有继续那样的功效吗?

$(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');
})

认为上首先种要 更有益于一点。
里头的参数function()是付诸成功后的回调函数。

本文由乐百家前段发布,转载请注明来源:jquery表单插件form使用办法详解