jquery中表單多選框的一種巧妙寫法

首頁

web前端

js教程

jquery中表單多選框的一種巧妙寫法_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

多選框表單

<!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 &#63; "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');
})

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7529

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何實現PHP表單提交後的頁面跳轉 Aug 12, 2023 am 11:30 AM

如何實現PHP表單提交後的頁面跳轉【簡介】在Web開發中，表單的提交是一項常見的功能需求。當使用者填寫完表單並點擊提交按鈕後，通常需要將表單資料傳送至伺服器進行處理，並在處理完後將使用者重新導向至另一個頁面。本文將介紹如何使用PHP來實現表單提交後的頁面跳躍。【步驟一：HTML表單】首先，我們需要在HTML頁面中撰寫一個包含表單的頁面，以便使用者填寫需要提交的資料。

如何使用 JavaScript 實作表單的輸入框內容自動提示功能？ Oct 20, 2023 pm 04:01 PM

如何使用JavaScript實作表單的輸入框內容自動提示功能？簡介：表單的輸入框內容自動提示功能在網頁應用程式中非常常見，它可以幫助使用者快速輸入正確的內容。本文將介紹如何使用JavaScript實作此功能，並提供具體的程式碼範例。在建立HTML結構首先，我們需要建立一個包含輸入框和自動提示清單的HTML結構。可以使用以下程式碼：<!DOCTYP

如何處理PHP表單中的使用者權限管理 Aug 10, 2023 pm 01:06 PM

如何處理PHP表單中的使用者權限管理隨著Web應用程式的不斷發展，使用者權限管理是重要的功能之一。使用者權限管理可以控制使用者在應用程式中的操作權限，確保資料的安全性和合法性。在PHP表單中，使用者權限管理可以透過一些簡單的程式碼來實現。本文將介紹如何處理PHP表單中的使用者權限管理，並給予對應的程式碼範例。一、使用者角色的定義與管理首先，將使用者角色定義與管理是使用者權

如何使用 JavaScript 實作表單的輸入框內容即時校驗功能？ Oct 18, 2023 am 08:47 AM

如何使用JavaScript實作表單的輸入框內容即時校驗功能？在許多網頁應用程式中，表單是使用者與系統之間最常用的互動方式。然而，使用者輸入的內容往往需要進行有效性校驗，以確保資料的準確性和完整性。在這篇文章中，我們將學習如何使用JavaScript實作表單的輸入框內容即時校驗功能，並提供具體的程式碼範例。在建立表單首先，我們需要在HTML中建立一個簡單的表

如何使用HTML、CSS和jQuery實現表單自動保存的進階功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery實現表單自動保存的高級功能在現代網頁應用中，表單是非常常見的元素之一。當使用者在輸入表單資料時，如何能夠實現自動儲存的功能，不僅可以提高使用者的使用體驗，也能確保資料的安全性。本文將介紹如何使用HTML、CSS和jQuery來實作表單的自動儲存功能，並附上具體的程式碼範例。一、HTML表單的結構建構我們先來建立一個簡單的HT

PHP表單處理：表單資料查詢與篩選 Aug 07, 2023 pm 06:17 PM

PHP表單處理：表單資料查詢與篩選引言在網路開發中，表單是一種重要的互動方式，使用者可以透過表單向伺服器提交資料並進行進一步的處理。本文將介紹如何使用PHP處理表單資料的查詢與篩選功能。表單的設計與提交首先，我們需要設計一個包含查詢與篩選功能的表單。常見的表單元素包括輸入框、下拉清單、單選框、複選框等，根據具體需求進行設計。用戶在提交表單時，會將資料以POS

Vue文件中的多選框勾選與全選函數的關係 Jun 21, 2023 am 09:33 AM

隨著前端技術的不斷發展與進步，Vue框架的應用也越來越普及。在Vue的實際應用中，常常會用到多選框勾選和全選的功能。而在Vue文件中，多選框勾選和全選的實作方法也是非常詳細的。 Vue中的多重選取框在Vue中，多重選取框的實作方法非常簡單，只需要在需要使用多重選取框的地方使用<inputtype="checkbox">即可。當需要選取多個選

如何使用Vue實作多選框和單選框 Nov 07, 2023 am 11:42 AM

如何使用Vue實作多選框和單選框Vue是一款流行的JavaScript框架，廣泛應用於Web開發中。在Vue中，我們可以很方便地實現各種互動效果，包括多選框和單選框。本文將介紹如何使用Vue實作多選框和單選框，並提供具體的程式碼範例。實現多選框多選框用於允許使用者選擇多個選項。在Vue中，我們可以利用v-model指令來實現多選框的雙向資料綁定。下面是一個簡單的例

See all articles

jquery中表單 多選框的一種巧妙寫法_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

jquery中表單多選框的一種巧妙寫法_jquery