复选框多 select 添加删除 class

Question

所以我有多个复选框和下拉选项。当我 select 一个复选框时，我想将一些 class 应用到下拉列表的 select 选项，当我取消选中相同的选项时，我想删除应用的 class.

我遇到的问题是，因为复选框是多个 select，它不能按我想要的方式工作。

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

现在，当两个复选框都被 select 编辑时，我们应该能够同时添加和删除 class。

<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

请帮忙。

更新：现在，当它被选中时，我将 class abc 应用到下拉列表中，并且还能够在取消选中时删除。但它已应用于所有 select 选项。我想要的是 class 应该应用于下拉菜单的选项。

Answer 1

如果您想检查复选框是否 selected 使用 is(':checked') 像这样 $('input[name=vehicle]').is(':checked') 它 returns 布尔值 - 真或假。

为了检查您 select 使用哪个 .val() 像这样：

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

它returns复选框的值。

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

这是新作品jsFiddle。如果我帮助了你，请告诉我。我只是建议了正确的方法，所以我没有把 id 放在所有选项上 ...

所以 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 是因为您在标签中提到了它。

编辑：此外，如果您不想再有任何 classes 位于 select 中，您可以使用此 .removeAttr('class') 删除 class 属性。

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

EDIT3：我使用了你的 jsFiddle 中的代码并重写了它，所以它现在可以按照你在评论中想要的那样工作了。

Answer 2

您需要先在 select 框中分隔类别。在你的代码上尝试这样的事情（更新）：

<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>

复选框多 select 添加删除 class

checkbox multi select add remove class

javascript

checkbox

jquery