Vue try

radio button with checkbox

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>


<div id="app">
  <input type="radio" v-model="selected_radio" value="A" v-on:change="selectDeptRd(selected_radio)"/><label>我是單選按鈕 1</label>

  <input type="radio" v-model="selected_radio" value="D" v-on:change="selectDeptRd(selected_radio)"/><label>我是單選按鈕 2</label>  

  <div>selected = {{ selected_radio }}</div>
  
  <ul class="deptchk">
    <li v-for="(row,index) in chkboxlist">
      <input type="checkbox" v-bind:value="row" v-model="selected_chkbox" />
        {{row.cname}}
    </li>
  </ul>
  
  <div>{{selected_chkbox}}</div>
  <input type="button" v-on:click="getSelection" value="取得清單"/>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

ul.deptchk li {
    display: inline;
}

JavaScript

/*
ref:https://jsfiddle.net/crswll/806shzzg/7/
*/
new Vue({
  el: "#app",
  data: {
  	//選取的radio
  	selected_radio:"",
    //選取的checkbox
    selected_chkbox:[],
    //checkbox list
    chkboxlist:[
    	{
      	aaa: "PI",
        cname: "進專",
        group: "A",
      },
      {
      	aaa: "PE",
        cname: "出專",
        group: "A",
      },
      {
      	aaa: "TI",
        cname: "進商",
        group: "A",
      },
      {
      	aaa: "TE",
        cname: "出商",
        group: "A",
      },
      {
      	aaa: "EXD",
        cname: "出口財務",
        group: "D",
      },
      {
      	aaa: "IMD",
        cname: "進口財務",
        group: "D",
      }
    ]
  },  
  methods: {
  		getSelection: function(){
      	//console.log(this.selected_chkbox);
        var arry = [];
        for(i=0;i<this.selected_chkbox.length;i++){
        	arry.push(this.selected_chkbox[i].aaa);
        }
        console.log(arry);
      },
    	selectDeptRd(valuer) {
        /*this.selected_chkbox = this.chkboxlist.filter(function (item) {
        	return item.group.indexOf(valuer) > -1
        });*/
        this.selected_chkbox = this.chkboxlist.filter(function (item) {
        	return item.group.indexOf(valuer) > -1;
        });               
      },
    }
  
})