复选框多选择添加删除类

Question

所以我有一个复选框和下拉选项。 当我选择一个复选框时，我想将一些类应用于下拉列表的选择选项，当我取消选中相同的选项时，我想删除该应用的类。

问题是，我得到的是因为复选框是多选的，它不会按我想要的方式工作。

说我检查第一个复选框时，我想将abc类应用于选项audi，并且当我取消选中该复选框时删除该abc css类属性。

现在当说这两个复选框被选中时，我们应该能够同时添加和删除类。

<form action=""> 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> 
    <input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 

这是我fiddle

请帮助。

更新：现在，当它被检查时，我将类abc应用到下拉列表中，并且也可以取消选中删除。但它已应用于所有选择选项。我想要的是班级应该适用于下拉选项。

Answer 1

如果你想检查一个复选框是否被选中，使用is(':checked')这样$('input[name=vehicle]').is(':checked')它返回布尔值 - 所以是true或false。

为了检查你选择哪一个使用.val()这样的：

$('input[name=vehicle]').val() 

它返回一个复选框的值。

你应该把ID放在选择的每个选项上，以便将类放在你想要的一个选项上。

这里是新的工作jsFiddle。让我知道我是否帮助过你。我只是提出了正确的方式，使我没有把IDS上的所有选项...

所以HTML代码如下所示：

<input class="cb" type="checkbox" value="hello" />Hello 
<input class="cb" type="checkbox" value="hi" />Hi 
<input class="cb" type="checkbox" value="bye" />Bye 
<br/><br/><br/> 

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option id="opel" value="opel">Opel</option> 
    <option id="audi" value="audi">Audi</option> 
</select> 

和JS是这样的：

$('input[name=vehicle]').click(function(){ 
    if($(this).is(':checked') && $(this).val() == 'Bike'){ 
     $('#opel').addClass('Bike'); 
    } else if ($(this).is(':checked') && $(this).val() == 'Car'){ 
     $('#saab').addClass('Car');  
    } else if ($(this).is(':checked') == false && $(this).val() == 'Bike'){ 
     $('#opel').removeClass('Bike'); 
    } else if ($(this).is(':checked') == false && $(this).val() == 'Car'){ 
     $('#saab').removeClass('Car');  
    } 
}); 

注意：我使用jQuery，因为你在标签中提到它。

编辑：另外，如果你不想要更多的类在选择内，你可以删除类属性与此.removeAttr('class')。

编辑2：编辑的答案工作的选项，而不是整个选择。提供了新的jsfiddle。

编辑3：我用你的代码从你的jsFiddle重写它，所以它现在可以工作，因为你想在评论中。

Answer 2

您需要先将选择框中的类别分开。您的代码尝试这样的事情（更新）：

<form action=""> 
<input type="checkbox" name="vehicle" id="Bike" value="Bike">I have a bike<br> 
    <input type="checkbox" name="vehicle" id="Car" value="Car">I have a car 
</form> 

<select id="theSelect"> 
    <option value="">Select</option> 
    <option class="Bike" value="volvo">Volvo</option> 
    <option class="Bike" value="saab">Saab</option> 
    <option class="Car" value="opel">Opel</option> 
    <option class="Car" value="audi">Audi</option> 
</select> 

<script type="text/javascript"> 
      $(document).ready(function() { 
       $("#Car").click(function() { 
        $("#theSelect .Bike").hide(); 
        $("#theSelect .Car").show(); 

       }); 
       $("#Bike").click(function() { 
        $("#theSelect .Car").hide(); 
        $("#theSelect .Bike").show(); 

       }); 
      }); 
     </script>