CODEWITHSUNDEEP
jquerycssformsradio-button
Max
Max

Reputation: 25

Problem: jQuery change css when input[type="radio"] is checked (value)

I want to change the css (display:block;) of a div with the data-id="group-vraag" when the a radiobutton is checked with the value="Vraag" and when the radiobutton is unchecked change the css to (display: none;)

I can't get it to work.

Edit: As u can see in the screenshot; both radio use [name="radio-keuze"]. I specifically want to target the one with 'Vraag'. Could I use .wpcf7-list-item .first for this?

$('input[type=radio][name="radio-keuze"]').change(function() {
    if($(this).val() == 'Vraag') {
        $('div[data-id="group-vraag"]').css({"display":"block"});
    }
  else if($(this).val() == '') {
        $('div[data-id="group-vraag"]').css({"display":"none"});
    }
});

Here is the html enter image description here

Upvotes: 0

Views: 556

Answers (2)

Twisty
Twisty

Reputation: 30893

You will want to check if the radio is checked. jQuery has a quick way to check for this as a selector, :checked. You can do this like so:

$('input[value="Vraag"]').change(function() {
  if($(this).is(":checked")) {
    $('div[data-id="group-vraag"]').css({"display":"block"});
  } else {
    $('div[data-id="group-vraag"]').css({"display":"none"});
  }
});

You can also do this:

$('input[type=radio][name="radio-keuze"]').change(function() {
  if($(this).prop("checked") && $(this).val() == "Vraag") {
    $('div[data-id="group-vraag"]').css({"display":"block"});
  } else {
    $('div[data-id="group-vraag"]').css({"display":"none"});
  }
});

There are lots of ways to confirm one specific element has been changed.

Upvotes: 1

David Benz
David Benz

Reputation: 49

Try this

$('input[type="radio"][name="radio-keuze"]').change(function() {
    if($(this).val() == 'Vraag') {
        $('div[data-id="group-vraag"]').css({"display":"block"});
    }
  else if($(this).val() == '') {
        $('div[data-id="group-vraag"]').css({"display":"none"});
    }
});

I added "" around type=radio.

Upvotes: 2

Related Questions