2. 程式人生 > >jquery如何判斷checkbox（複選框）是否被選中

jquery如何判斷checkbox（複選框）是否被選中

阿新 • • 發佈：2019-01-10

經常碰到問題是關於checkbox的，這類問題主要就是前端獲取到一組複選框中被選中的複選框的值，所以使用jquery能很快的得到結果，下面是關於複選框的各種情況的解決辦法。

程式碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<script
 
 type="text/javascript">
 $("document").ready(function(){

  $("#btn1").click(function(){
    $("[name='checkbox']").attr("checked",'true');//全選
  })

  $("#btn2").click(function(){
    $("[name='checkbox']").removeAttr("checked");//取消全選
  })

  $("#btn3").click(function(){
    $("[name='checkbox']:even"
 
).attr("checked",'true');//選中所有奇數
  })

  $("#btn4").click(function(){
    $("[name='checkbox']").each(function(){
    if($(this).is(':checked'))
    {
      $(this).removeAttr("checked");
    }
    else
    {
      $(this).attr("checked",'true');  
    }
    })
  })

  $("#btn5").click(function(){
    var
 
 str="";
    $("[name='checkbox']").each(function(){
      if($(this).is(':checked')){
        str+=$(this).val()+""r"n";
        //alert($(this).val());
      }
    })
   alert(str);
  })

 })

</script>

</head>
<body>
  <form name="form1" method="post" action="">
    <input type="button" id="btn1" value="全選">
    <input type="button" id="btn2" value="取消全選">
    <input type="button" id="btn3" value="選中所有奇數">
    <input type="button" id="btn4" value="反選">
    <input type="button" id="btn5" value="獲得選中的所有值">
    <br>
    <input type="checkbox" name="checkbox" value="checkbox1">
    checkbox1
    <input type="checkbox" name="checkbox" value="checkbox2">
    checkbox2
    <input type="checkbox" name="checkbox" value="checkbox3">
    checkbox3
    <input type="checkbox" name="checkbox" value="checkbox4">
    checkbox4
    <input type="checkbox" name="checkbox" value="checkbox5">
    checkbox5
    <input type="checkbox" name="checkbox" value="checkbox6">
    checkbox6
    <input type="checkbox" name="checkbox" value="checkbox7">
    checkbox7
    <input type="checkbox" name="checkbox" value="checkbox8">
    checkbox8
  </form>
</body>
</html>

相關推薦

jquery如何判斷checkbox（複選框）是否被選中

經常碰到問題是關於checkbox的，這類問題主要就是前端獲取到一組複選框中被選中的複選框的值，所以使用jquery能很快的得到結果，下面是關於複選框的各種情況的解決辦法。 程式碼如下： <html> <head> <

MUI-checkbox（複選框），左右位置+禁用設定

本文主要介紹checkbox（複選框）顯示的位置和禁用設定。 1、checkbox常用於多選的情況，比如批量刪除、新增群聊等， 結構如下： <div class="mui-input-row mui-checkbox"> <label>checkbox示例

判斷多個複選框是否有被選中

check是複選框的name。 function isChecked(){ var count = 0; var checkArry = document.getElementsByName("check"); for (var i = 0; i < che

layui和jQuery根據資料庫給複選框設定預設被選中checked

設定複選框被選中 根據資料庫查詢的資料與input標籤的title的值對比，相同則頁面載入時預設被選中 layui設定被選中後，必須要進行“更新渲染”後，複選框才會顯示被選中，否則只是checked改變，頁面複選框無變化 更新渲染 1. 頁面

POI 多選下拉選單（複選框） 匯出Excel模板 下拉選單單選，下拉選單多選

最近公司要做Excel的模板匯出，匯入資料的工作，匯出時還要動態生成模板，並且生成單選下拉選單，和多選下拉選單。開始搞這個很快除了多選的都搞定了，就是多選卡住了。弄了很久。。。最後終於在和多方面的交流下成功弄出。之前在網上找不到方法很是頭疼，現在弄出來分享一下給大家。。歡迎指

jquery+css+html無限級tree樹形選單（含複選框）

　　最近在做前端頁面改版，將以前的靜態佈局用bootstrap+自定義樣式重構web頁面。今日按jpg效果圖重構了一個樹目錄選單。架構思路不難，跟第一篇發的“非常簡潔的仿js樹形選單”差不多，難在要在細節上處理好，時間有限，就是多選框那裡處理不太好，可以自行再優化。效果向下

安卓---RedioButton(單選按鈕)、CheckBox（復選按鈕）

radio eight color ont parent androi android 安卓 radi <RadioGroup android:layout_width="fill_parent" android:layout_height="wra

ButtonGroup & JRadioButton（單選框）

關於ButtonGroup和JRadioButton的應用 import java.awt.*; import javax.swing.*; public class JRadioButtonT

jquery實現帶複選框的表格行選中刪除時高亮顯示

/**  * 設定含有複選框的表格中的背景色  */  $(document).ready(function()  {  /**  * 表格行被單擊的時候改變背景色  */  $("#tablight tr:gt(0)").click(function() //獲取第2行後  {  if ($(this)

input　checkbox　複選框的操作示例

checkboxtest.php的內容如下： <?php $treat_type=array("物理治療","皮下注射","化學","光療類","手術類","無。" ); //獲取post進行列印： $get_treat=$_POST["treat"]; $trea

玩轉Android---UI篇---CheckBox（多選按鈕）

原址：http://hualang.iteye.com/category/143855 多選按鈕CheckBox的可以實現多項選擇，我們可以現在佈局檔案中定義多選按鈕，然後對每一個多選按鈕進行事件監聽 setOnCheckedChangeListener，通過isC

JQuery 迴圈遍歷 , 複選框全選全消反選checked屬性

陣列 集合的遍歷  $.each(list,function(index,item){ this. //this就表示item}); jquery物件的迴圈遍歷  jquery物件.each(function(){ this.  //this就表示迴圈的jquery物件})

AngularJS+JQuery 做的一個複選框樹形結構

<html ng-app="com.ngbook.demo" class="ng-scope"> <head> <meta name="description" content="ng trrview example">

JavaScript判斷一組單選或複選按鈕至少一個被選中

//判斷某個單選或複選按鈕是否被選中至少一個 function isChecked(chkName){ var cps = document.getElementsByName(chkName); var chk = false; for(va

編輯時，已存在的複選框，預設被勾選

<%@ page language = "java" contentType = "text/html; charset=utf-8" pageEncoding = "utf-8" %> <%@ taglib uri = "http://jav

Angular2可以使用的獲取複選框（checkbox）的值的一種方法

樓主剛接觸angular2...需要實現一個checkbox，但是網上搜了很多資料都是angularJs的，基本不能通用，終於找到能用的方法，（不敢說合適），現在記錄如下： 樓主的checkbox是迴圈裡生成的，所以就以迴圈方法為例 如下是html程式碼，樓主的情景是勾選複選框框，然後批量刪

BootStrap-table 複選框預設選中（checkbox）

BootStrap-table 複選框預設選中（checkbox） bootstrap table colums 寫法 var columns = [{ field : 'checked', checkbox : true,

Vuejs 的表單複選框（type = "checkbox"） 單選框（type = "radio"）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

【Winform】【Devxepress】關於獲取Gridview中複選框（checkbox）狀態改變問題

點選gridview中checkbox會觸發的事件（之一 private void gridView1_RowCellClick(object sender, RowCellClickEventArgs

Winform/C#入門程式設計之第二部分常用控制元件（四：複選框控制元件CheckBox）

簡介：         介紹複選框控制元件CheckBox。常用在某些功能的是否啟用判斷。   介紹： 1.屬性 常用屬性 Name 獲取或設定控制元件的名稱。