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

返回复选框的值。

你应该在每个select选项上加上id，以便将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，因为你在标签中提到了它。

编辑：此外，如果您不希望在select中包含更多类，则可以使用此.removeAttr('class')删除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>

复选框多选添加删除类

2 个答案: