复选框多选添加删除类

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') 它返回布尔值 - 真或假。

为了检查您选择了哪一个，请像这样使用.val()：

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

它返回一个复选框的值。

您应该将 id 放在 select 的每个选项上，以便将 class 放在您想要的一个选项上。

这是新的工作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') 删除类属性。

EDIT2：编辑答案以处理选项而不是全选。提供了新的 jsfiddle。

EDIT3：我使用了您的 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>