JQuery之複選框checkbox基本操作

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

利用JQuery實現複選框的基本操作，例如全選、全部選、獲取選中值、獲取未選中值、獲取選中長度等操作。

下面直接看例子，例子中有詳細的介紹了JQuery是如何實現這些功能的。

在使用JQuery之前要先匯入JQuery的相關檔案，我這裡引入的是jquery-1.8.0.min.js

<html>
<head>
	<meta charset="UTF-8">
<title>js中字串處理</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	$(function() {

	});

	function checkBoxFuc(){
		var str="";
		$('input:checkbox').each(function() {
			if ("checked"==$(this).attr('checked')) {
				str=str+$(this).val()+",";
			}
		});
		str="<h1>"+str+"</h1>";
		$("#checkBoxId").html(str);
	};

	function checkBoxEdFuc(){
		var str="";
		$('input:checkbox').each( function(){
			var self=$(this);
			if(!self.prop('checked')){
				str=str+self.val()+",";
			}
		});
		str="<h1>"+str+"</h1>";
		$("#checkBoxEdId").html(str);
	};

	function allCheckBoxEdFuc(){
		$('input:checkbox').each(function(){
			var self=$(this);
			if(!self.prop('checked')){
				self.prop('checked',true);
			}
		});
	};

	function notAllCheckBoxEdFuc(){
		$('input:checkbox').each(function(){
			var self=$(this);
			if(self.prop('checked')){
				self.prop('checked',false);
			}
		});
	};

	function numberFuc(){
		var length="<h1>選中的個數為："+$('input:checkbox:checked').length+"</h1>";
		$("#numberId").html(length);
	};

	function noNumberFuc(){
		var allLength=+$('input:checkbox').length;
		var checkedLength=$('input:checkbox:checked').length;
		var length=allLength-checkedLength;
		$("#noNumberId").html("<h1>未選中個數為："+length+"</h1>");
	}
	function allNumberFuc(){
		var length="<h1>總個數為："+$('input:checkbox').length+"</h1>";
		$("#allNumberId").html(length);
	};

	function firstLastFuc(){
		$('input:checkbox:first').attr("checked",'true');
		$('input:checkbox:last').attr("checked",'true');
	};

	function checkNumber(){
		var number=$("#checkId").val();
		//$('input:checkbox').eq(number-1).attr("checked",'true');
		$('input:checkbox').eq(number-1).prop("checked",true);
	}
</script>

<body>
	<input type="checkbox" value="1">1
	<input type="checkbox" value="2">2
	<input type="checkbox" value="3">3
	<input type="checkbox" value="4">4
	<input type="checkbox" value="5">5
	<input type="checkbox" value="6">6
	<input type="checkbox" value="7">7
	<input type="checkbox" value="8">8</br>
	<input type="button" value="選中的值有：" onclick="checkBoxFuc();"><p id="checkBoxId"></p>
	<input type="button" value="未選中的值有：" onclick="checkBoxEdFuc();"><p id="checkBoxEdId"></p>
	<input type="button" value="全選：" onclick="allCheckBoxEdFuc();"><p id="allCheckBoxEdId"></p>
	<input type="button" value="全不選：" onclick="notAllCheckBoxEdFuc();"><p id="notAllCheckBoxEdId"></p>
	<input type="button" value="選中的個數：" onclick="numberFuc();"><p id="numberId"></p>
	<input type="button" value="未選中的個數：" onclick="noNumberFuc();"><p id="noNumberId"></p>
	<input type="button" value="總個數：" onclick="allNumberFuc();"><p id="allNumberId"></p>
	<input type="button" value="選中第一個和最後一個：" onclick="firstLastFuc();"><p id="firstLastId"></p>
	<input id="checkId" type="text"/><input type="button" value="選中需要選中的號數" onclick="checkNumber();">
</body>
</html>

執行截圖：

JQuery之複選框checkbox基本操作

利用JQuery實現複選框的基本操作，例如全選、全部選、獲取選中值、獲取未選中值、獲取選中長度等操作。下面直接看例子，例子中有詳細的介紹了JQuery是如何實現這些功能的。在使用JQuery之前要先匯入JQuery的相關檔案，我這裡引入的是jquery-1.8.0.mi

jquery對複選框(checkbox)的操作彙總

query操作複選框(checkbox)的12個小技巧。 1、獲取單個checkbox選中項(三種寫法) ? 1 $("input:checkbox:checked").val()

Form表單之複選框checkbox操作

input複選(checkbox)： <label>input複選1組：</label> <input type="checkbox" name="checkbox1" value="checkbox複選1" checked=

jquery實現複選框checkbox全選取消全選

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的，是Iterator迴圈遍歷出來的。<td class="rd8"><input type="checkbox" name="selectFlag" id="selectFlag" valu

jquery實現複選框checkbox全選，取消全選

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的，是Iterator迴圈遍歷出來的。 <td class="rd8"> <input type="checkbox" name="selectFlag" id="selectFlag" value="<%=

jquery獲取複選框checkbox的值

<%@ page language="java" contentType="text/html" import="java.util.*" pageEncoding="GBK"%><%String path = request.getContextPath();String baseP

jQuery操作複選框checkbox技巧總結 ---- 設定選中、取消選中、獲取被選中的值、判斷是否選中等

jQuery操作複選框checkbox技巧總結 --- 設定選中、取消選中、獲取被選中的值、判斷是否選中等一、checked屬性定義先了解下input標籤的checked屬性： 1、HT

Jquery操作複選框(CheckBox)的取值賦值實現程式碼

賦值複選框 CheckBox 遍歷取值 1. 獲取單個checkbox選中項(三種寫法)： $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("inp

jquery和js分別實現獲取checkbox的值+jquery實現複選框全選

//jquery實現全選 $(function(){ $("#checkAll").click(function(){ $(".checkOne").attr("checked",this.checked) }) }) //批量刪除jquery實現提示 function p_d

Python+Selenium練習篇之17-點選複選框-Checkbox

本文介紹Selenium中，如何操作複選框-Checkbox，最終的方法還是click()。本來想還是繼續採用for語句來把所有的複選框勾選一遍，例如這樣的場景：註冊一個網站勾選身份或者職業的時候

使用jQuery完成複選框的全選和全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" s

jQuery實現複選框單選

這裡職務只能勾選一個，所以我打算實現複選框只能單選的功能。實現思路：遍歷每一個checkbox，如果有一個選中，其他的就預設未選中狀態，從而實現checkbox單選功能。 js程式碼： //checkbox實現單選 $("input[name='job']:checkb

獲取ListControl控制元件中(複選框)CheckBox的狀態

轉載：http://blog.chinaunix.net/uid-20680966-id-1896376.html 推薦：簡單明瞭的例子，適合入門，剩下的就是自由發揮了。注：LVN_ITEMCHANGED 某個項已經發生變化。如果使用VS2010或更高版本，字元一般預設Unicod

使用jQuery做複選框的全選與取消

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js" type

後臺獲取js複選框checkbox批量刪除

<head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <link href="/common/css/css.css" rel="stylesheet" type="text/c

JQuery 實現複選框全選反選功能

HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty

jquery獲取複選框中的值

<body> <div> 輸入框：<input type="text" id="in1" value="123"> 城市：<input type="checkbox" name="北京" value="bj" checked="che

複選框 checkbox獲取值

判斷是否有選擇值： var count = 0; $("input[name=subBox]:checkbox:checked").each(function () { count++;

jquery實現複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成複選框的全選和全不選</title> <script t

javascrip下拉框、複選框的一些操作

下拉框的一些基本操作 //1.獲取下拉框的值 var radioValue = $("#radio option:selected").val(); //2.將下拉框中的某個值設定為選中狀態 $("#opt option").each(function(){ if($(this).va

JQuery之複選框checkbox基本操作

相關推薦