Home > Enterprise >  Change the div class if user checked a radio button
Change the div class if user checked a radio button

Time:02-19

Hi to all i have this two div who has inside a hidden radio button. I want when user click one choise to change the choise-block class with other class. My mind is stucked and i search for possible solutions:

             <div >
                <div >
                    <input  type="radio" @change="choiseCheck">
                    <label >
                        <h3>Question 1</h3>
                    </label>
                </div>
            </div>
            <div >
                <div >
                    <input  type="radio" @change="choiseCheck">
                    <label >
                        <h3>Question 2</h3>
                    </label>
                </div>
            </div>

CodePudding user response:

If you want to toggle classes on elements based on some sort of variable value, I'd recommend checking out the docs on class bindings to get a better grasp on what's possible and how.

But the gist of it is this:

<!-- is-active will be toggled when this radio is selected -->
<div  :>
  <div >
    <input
      
      type="radio"
      v-model="picked"
      :value="1"
      id="question-1"
    />
    <label  for="question-1"> Question 1 </label>
  </div>
</div>

You can see it in action in this codesandbox demo thing I made for ya. Good luck.

  • Related