js實現表單checkbox的單選,全選


全選&單選

	//<input type="checkbox" name="" class="quan" value="" />全選
	//<input type="checkbox" name="" class="dan" value="" />單選
	//<input type="checkbox" name="" class="dan" value="" />單選
	//<input type="checkbox" name="" class="dan" value="" />單選
	//<input type="checkbox" name="" class="dan" value="" />單選
	//<input type="checkbox" name="" class="quan" value="" />全選
	
	<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">	
		var $checke_q = $(".quan"); //全選按鈕
		var $checke_d = $(".dan"); //單選按鈕

		$checke_q.click(function() {
			var that = this;
			$checke_d.each(function() { //所有的單選按鈕跟隨選中的多選按鈕變化
				this.checked = that.checked;
			})
			$checke_q.each(function(){  //所有的多選按鈕跟隨選中的多選按鈕變化
				this.checked=that.checked;
			})
		})
		$checke_d.change(function() {
			let count = 0; //單選 按鈕 個數
			$checke_d.each(function() { 
				if(this.checked) {
					count ++;
				}
			})
			if(count == $checke_d.length) {   //當count等於單選按鈕的個數時 說明單選按鈕全部選中了,此時多選按鈕也該被選中
				$checke_q.each(function() {
					this.checked = true;
				})
			} else {
				$checke_q.each(function() {
					this.checked = false;
				})
			}
		})
	</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM