在复选框处创建函数，请点击

问题描述

在这里，我需要编写一个函数来在用户单击“ Spa”复选框时显示“ is spa”部分。这是一个laravel / Vue js项目。

---

这是我为复选框编写的引导代码

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

解决方法

首先让我们弄清楚您的需求。

1. 单击该复选框时，您要运行一个方法
2. 在该方法中，您将检查单击的复选框的值。
3. 如果复选框的值为'spa'，则显示单选按钮，否则将其隐藏

HTML代码： 粗略的结构，您可以使用spaRadio ID在div中填充单选按钮代码。我们在复选框上添加了@change方法，其余方法相同。

<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>

接下来，在该方法中，我们将添加一个条件以检查其是否等于“ spa”或“ poolAndSpa”。为了检查条件，我们将选择的值与每个预期的过滤器进行匹配。比较是错误的。

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

正确的方法：

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

方法：

  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
        } 
    }
  },

工作示例： https://codepen.io/AhmedKhan1/pen/LYNQNmw