If radio button is selected and select value is selected jquery

Question

Updating issue: So now i can get the white shirts to work but not yellow. I can switch between small-med-lrg on white, but swapping to yellow still only changes between white shirt sizes. I've condensed code to only show small white and small yellow

<select class="color">
   <option value="white">White</option>
   <option value="yellow">Yellow</option>
</select>
   <input type="radio" class="size" name="size" value="small">Small
   <input type="radio" class="size" name="size" value="medium" checked>Medium
   <input type="radio" class="size" name="size" value="large">Large

and js:

$('.size').click(function() {
    shirtButtons.hide();
    if( $('.color').val() == 'white' || $('.size:checked').val() == 'small'){ 
        shirtButtons.hide();
        $('.white-small').show();
    }else if( $('.color').val() == 'yellow' || $('.size:checked').val() == 'medium'){ 
        shirtButtons.hide();
        $('.yellow-medium').show();
    }
});
$('.color').change(function() {
    shirtButtons.hide();
    if( $('.color').val() == 'white' || $('.size:checked').val() == 'small'){ 
        shirtButtons.hide();
        $('.white-small').show();
    }else if( $('.color').val() == 'yellow' || $('.size:checked').val() == 'small'){ 
        shirtButtons.hide(); 
        $('.yellow-small').show();
    }
});

Answer 1

You must add a class size to the inputs.

 <input type="radio" class="size" name="size" value="small">Small
 <input type="radio" class="size" name="size" value="medium" checked>Medium
 <input type="radio" class="size" name="size" value="large">Large

Then use the :checked selector to obtain the value:

$(".size:checked").val()

Full JS

$('.color, .size').click(function() {
  if( $('.color').val() == 'white' ||  $(".size:checked").val() == 'small'){ 
      shirtButtons.hide();
      $('.white-small').show();
   }else if( $('.color').val() == 'white' ||  $(".size:checked").val() == 'medium'){ 
      shirtButtons.hide();
      $('.white-medium').show();
   } //etc 
});

JS Fiddle: http://jsfiddle.net/B93WW/

Answer 2

Here is some example I have created for you:

<select class="color">
  <option value="white">White</option>
  <option value="yellow">Yellow</option>
</select>

<input type="radio" class="size" name="size" value="small">Small
<input type="radio" class="size" name="size" value="medium" checked>Medium
<input type="radio" class="size" name="size" value="large">Large

$('.size').click(function() {
  myFunction();
});

$('select.color').change(function() {
  myFunction();
});

function myFunction(){
  shirtButtons.hide(); // Don't know what is shirtButtons, please explain
  var color = $('select :selected').val();
  var size = $('.size:checked').val();

  if(color  == 'white' || size  == 'small'){ 
    shirtButtons.hide(); // Don't know what is shirtButtons, please explain
    $('.white-small').show();
  } else if( colort == 'yellow' || size == 'medium'){ 
      shirtButtons.hide(); // Don't know what is shirtButtons, please explain
      $('.yellow-medium').show();
    }
}

So, you can try to alert or console.log the variables color and size .
Please let me know where you have the problems.