CODEWITHSUNDEEP
jqueryhtml
burger97979
burger97979

Reputation: 85

jQuery not Showing Elements?

I have used .hide() on some HTML elements that I've created and would like for them to show as soon as the person checks the Yes option in the radio button that I've created. My jQuery is as follows

if (document.querySelector('input[name="FIELD7"]:checked').value == "Yes") {
    $("#weapons").show();
    $("#weaponfield").show();
    $("#weaponfield2").show();
    $("#weaponfield3").show();
    $("#weaponfield4").show();
}

For some reason, when I select the "Yes" option, the elements will not .show();.

Anyone out there?

UPDATE
I have managed to fix this entire problem. I appreciate those who tried to help me! I have created my own fix though as none of the other methods worked.I assigned each input an ID and just called the ID to be hidden on a click function, very simple, lol! Here is my jQuery:

            $("#weaponyes").click(function() {
                $("#weapons").show();
                $("#weaponfield").show();
                $("#weaponfield2").show();
                $("#weaponfield3").show();
                $("#weaponfield4").show();
            });

            $("#weaponno").click(function() {
                $("#weapons").hide();
                $("#weaponfield").hide();
                $("#weaponfield2").hide();
                $("#weaponfield3").hide();
                $("#weaponfield4").hide();
            });

This seemed to work perfectly, thanks!

Upvotes: 2

Views: 67

Answers (4)

burger97979
burger97979

Reputation: 85

I have managed to fix this entire problem. I appreciate those who tried to help me! I have created my own fix though as none of the other methods worked.I assigned each input an ID and just called the ID to be hidden on a click function, very simple, lol! Here is my jQuery:

            $("#weaponyes").click(function() {
                $("#weapons").show();
                $("#weaponfield").show();
                $("#weaponfield2").show();
                $("#weaponfield3").show();
                $("#weaponfield4").show();
            });

            $("#weaponno").click(function() {
                $("#weapons").hide();
                $("#weaponfield").hide();
                $("#weaponfield2").hide();
                $("#weaponfield3").hide();
                $("#weaponfield4").hide();
            });

This seemed to work perfectly, thanks!

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Use on change event then check if the input radio is being checked by using if ($("input[name='FIELD7']").is(":checked"))

JS

$("input[name='FIELD7']").on("change", function() {
    if ($("input[name='FIELD7']").is(":checked"))
      $("#weapons").show();
});

Fiddle

After seeing your recent comment I added an update:

$("input[name='FIELD7']").on("change", function() {
    if ($(this).is(":checked") && $(this).val() == 'Yes')
      $("#weapons").show();
});

Fiddle

Update when No is selected then hide:

$(function() {
    $("input[name='FIELD7']").on("change", function() {
        if ($(this).is(":checked") && $(this).val() == 'Yes')
          $("#weapons").show();
        else
          $("#weapons").hide();  
    });   
});

CSS

Hide elements by default.

#weapons, 
#weaponfield,
#weaponfield2,
#weaponfield3,
#weaponfield4 {
  display: none;
}

Fiddle

Upvotes: 2

Mehrdad Pedramfar
Mehrdad Pedramfar

Reputation: 11073

you can use is too. it should helps you. for me it did

 if ($("input[name='FIELD7']").is(":checked")){

    $("#weapons").show();
    $("#weaponfield").show();
    $("#weaponfield2").show();
    $("#weaponfield3").show();
    $("#weaponfield4").show();
}

Upvotes: 1

saravanan mp
saravanan mp

Reputation: 783

Use a simple condition

var a=document.querySelector('input[name="FIELD7"]:checked');

Now in your code you could check in your condition

if(a!=null)
    {
        if (document.querySelector('input[name="FIELD7"]:checked').value == "Yes") 
        {
            $("#weapons").show();
        }
    }

Upvotes: 0

Related Questions