Creating a function at checkbox click

Question

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";
        }

I need to write a function on "Spa" checkbox . So then, user can see another two radio buttons when he clicked "spa" — Devin Y
– Devin Y, Commented Sep 8, 2020 at 4:44
add a change event on the checkbox and conditionally render the data to check if its spa, if yes show the radio buttons else dont. — Mr Khan
– Mr Khan, Commented Sep 8, 2020 at 5:03
@MrKhan I updated the question. I tried the way you told me as I understood. I'm new to this. What was possibly went wrong? — Devin Y
– Devin Y, Commented Sep 8, 2020 at 7:59

Dharman · Accepted Answer · 2020-09-08 12:03:36Z

1

First let's clear out what you need.

When ever the checkbox is clicked, you want to run a method
In the method, you will check the value of the clicked checkbox.
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

edited Sep 8, 2020 at 12:03

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 8, 2020 at 11:57

Mr Khan

2,3061 gold badge9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Devin Y Over a year ago

@dharman That worked! thanks. And I found another way to show hide the related element. <div v-show ="selected == 'spa' || selected == 'poolAndSpa'"> This also worked .

Mr Khan Over a year ago

Great brother! i just provided you with a simple relevant example. how you improve it is in your hands. Keep it up!

Collectives™ on Stack Overflow

Creating a function at checkbox click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related