CODEWITHSUNDEEP
javascriptvue.jslaravel-7bootstrap-vue
Devin Y
Devin Y

Reputation: 137

Creating a function at checkbox click

Here I need to write a function to display "is the spa" section when the user clicks the "Spa" checkbox.This is a laravel/Vue js project.

This is the bootstrap-vue code I wrote for checkboxes

 <template>
    <b-form-group label="Construction is a: ">
            <b-form-checkbox-group
            v-model="selected"
            :options="options"
            name="flavour-2a"
            stacked
            ></b-form-checkbox-group>
    </b-form-group>
</template>



<script>
    selected: [], // Must be an array reference!
    options: [
      { text: 'Pool', value: 'pool' },
      { text: 'Spa', value: 'spa' },
      { text: 'Pool & Spa', value: 'poolAndSpa'},         
      
      ],
</script>
// **This is the function I wrote** ,
 <b-form-group label="Construction is a: ">
            <b-form-radio-group
            v-model="selected"
            :options="options"
            name="poolConstruction"
            @change="radioChange($event)"
            stacked
            ></b-form-radio-group>
        </b-form-group> 

       radioChange: function(e) {
        if(this.selected == "spa"||"poolAndSpa"){
            
            document.getElementById("spaRadio").style.display = "block";
        }else
                        
        {
        document.getElementById("spaRadio").style.display = "none";
        }

Upvotes: 2

Views: 956

Answers (1)

Mr Khan
Mr Khan

Reputation: 2292

First let's clear out what you need.

  1. When ever the checkbox is clicked, you want to run a method
  2. In the method, you will check the value of the clicked checkbox.
  3. If the value of the checkbox is 'spa', then display the radio button else hide them

HTML code: A rough structure, you can populate your radio button code in the div with spaRadio Id. We have added @change method on the check boxes and the rest is the same.

<div id="app">
  <b-container>
    <b-row>    
     <b-form-group class="mx-auto">
        <b-form-checkbox-group buttons @change="handleChange($event)"  name="butons1" class="customCheck1" :options="chartOptions" v-customcheckbox="chartOptions">
        </b-form-checkbox-group>
      </b-form-group>      
    </b-row>
    <b-row>
       <p class="mx-auto">  Selcted:  {{ charts }}</p>
    </b-row> 
    <div id="spaRadio" class="hide">
        <p>Radio's here<p>
    </div>
  </b-container>
</div>

Next, in the method, we will add a condition to check if its equal to 'spa' or 'poolAndSpa'. To check the condition we will match selected value with each expected filter. This is a wrong of comparing.

this.selected == "spa"||"poolAndSpa"

The right way:

 (this.selected == "spa" || this.selected == "poolAndSpa")

Method:

  methods: {
    handleChange: function(e) {
        const name = e;
        this.selected = name; //====> assign selected value
        let result = this.selected.find(el=> (el=== "spa") || (el=== "poolAndSpa")); //====> this will search for the filter keywords 'spa' or 'poolAndSpa'
        if(result !== undefined){ //====> if any one of them is found then this will return a value else it will be undefind
          document.getElementById("spaRadio").style.display = "block"; //===> display radio
        }else {
          document.getElementById("spaRadio").style.display = "none"; //===> hide
        } 
    }
  },

Working example: https://codepen.io/AhmedKhan1/pen/LYNQNmw

Upvotes: 1

Related Questions