Bạn đang tìm hiểu vue.js và gặp vấn đề về checkbox, khi muốn chọn all để gửi dữ liệu lên server, ở bài viết này SonWeb sẽ hướng dẫn dùng checkbox trong vue.js kết hợp check all, hay multi select để gửi value lên serer,ở bài tiếp theo sẽ mô tả xoá nhiều tronng laravel và vue.js.

1. Nhúng thư viện vue.js vào trong source code của bạn

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.Sử dụng code Html và javascript dùng vue.js

<div id='myapp'>
 
  <!-- Check All -->
  <input type='checkbox' @click='checkAll()' v-model='isCheckAll'> Check All

  <!-- Checkboxes list -->
  <ul>
    <li v-for='lang in langsdata'>
     <input type='checkbox' v-bind:value='lang' v-model='languages' @change='updateCheckall()'>{{ lang }}
    </li>
  </ul>

  <!-- Print -->
  <input type='button' @click='printValues()' value='Print Selected Values'>

  <br>
  Selected items : {{ selectedlang }}

</div>

Chúng ta tạo 1 checkbox khi check all gọi function @click=’checkAll()’. và v-model=’isCheckAll’. Dùng v-for trong vòng lặp langsdata đối tới từng phần từ checkbox. Trong checkbox add v-bind:value=’lang’,v-model=’languages’ và @change=’updateCheckall()’. Dùng button hiển thị selected checkboxes value khi click bởi printValues() @click=’printValues()’.
3.Code Script vue.js
Tạo 4 biến trong data options.
langsdata – 1 Array chứa các values. Dùng trong v-for directive to create checkboxes. isCheckAll – là biến kiểu boolean type variable.
languages – Là biến kiểu mảng.Dùng trong v-model trực tiếp checkboxes.
selectedlang – Dùng để lưu checked checkboxes value and và hiện thị khi gọi printValues().

var app = new Vue({
  el: '#myapp',
  data: {
    isCheckAll: false,
    langsdata: ["PHP","Vue.js","AngularJS","jQuery","JavaScript"],
    languages: [],
    selectedlang: ""
  },
  methods: {
    checkAll: function(){

      this.isCheckAll = !this.isCheckAll;
      this.languages = [];
      if(this.isCheckAll){ // Check all
        for (var key in this.langsdata) {
          this.languages.push(this.langsdata[key]);
        }
      }
    },
    updateCheckall: function(){
      if(this.languages.length == this.langsdata.length){
         this.isCheckAll = true;
      }else{
         this.isCheckAll = false;
      }
    },
    printValues: function(){
      this.selectedlang = "";
      // Read Checked checkboxes value
      for (var key in this.languages) {
         this.selectedlang += this.languages[key]+", "; 
      }
    }
  }
})

4.Sourcode Full

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Performing Maintenance</title>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
      body { text-align: center; padding: 150px; }
      h1 { font-size: 40px; }
      body { font: 20px Helvetica, sans-serif; color: #333; }
      #article { display: block; text-align: left; width: 650px; margin: 0 auto; }
      a { color: #dc8100; text-decoration: none; }
      a:hover { color: #333; text-decoration: none; }
    </style>
</head>
<body>
<div id="article">
<h1>All checkbox .</h1>
	<div id="app">
		
		<!-- Check All -->
	  <input type='checkbox' @click='checkAll()' v-model='isCheckAll'> Check All

	  <!-- Checkboxes list -->
	  <ul>
		<li v-for='lang in langsdata'>
		 <input type='checkbox' v-bind:value='lang' v-model='languages' @change='updateCheckall()'>{{ lang }}
		</li>
	  </ul>

	  <!-- Print -->
	  <input type='button' @click='printValues()' value='Print Selected Values'>

	  <br>
	  Selected items : {{ selectedlang }}
	</div><!--end app-->
	
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!',
				isCheckAll: false,
				langsdata: ["PHP","Vue.js","AngularJS","jQuery","JavaScript"],
				languages: [],
				selectedlang: ""
			},
			methods: {
				checkAll: function(){

				  this.isCheckAll = !this.isCheckAll;
				  this.languages = [];
				  if(this.isCheckAll){ // Check all
					for (var key in this.langsdata) {
					  this.languages.push(this.langsdata[key]);
					}
				  }
				},
				updateCheckall: function(){
				  if(this.languages.length == this.langsdata.length){
					 this.isCheckAll = true;
				  }else{
					 this.isCheckAll = false;
				  }
				},
				printValues: function(){
				  this.selectedlang = "";
				  // Read Checked checkboxes value
				  for (var key in this.languages) {
					 this.selectedlang += this.languages[key]+", "; 
				  }
				}
			}
		})
	</script>
</div>
</body>
</html>

Download file full source code tại đây: https://drive.google.com/file/d/1SaUmii8p_-NP_l5e7kGbNghizOQH4TrM/view?usp=sharing
Nguồn tham khảo : https://makitweb.com/check-uncheck-all-checkboxes-with-vue-js/

5/5 - (1 bình chọn)

Vue & Laravel

Hướng dẫn all checkboxes và un checkbox trong vue.js

Sơn Thanh

Sơn Thanh

Đăng nhập