如果选择单选按钮并选择了jquery选择值

时间:2014-02-16 00:03:15

标签: javascript jquery

更新问题:所以现在我可以让白衬衫上班,但不是黄色。我可以在白色的小内裤之间切换,但是换成黄色仍然只在白色衬衫尺寸之间切换。我已经缩写代码只显示小白色和小黄色

<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

和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();
    }
});

2 个答案:

答案 0 :(得分:2)

您必须在输入中添加课程size

 <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

然后使用:checked选择器获取值:

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

完整的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小提琴: http://jsfiddle.net/B93WW/

答案 1 :(得分:1)

以下是我为您创建的一些示例:
HTML代码

<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

JS代码

$('.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();
    }
}

因此,您可以尝试alertconsole.log变量colorsize
请告诉我您遇到问题的地方。