javascript - 如何使用 css 或 jQuery 突出显示复选框输入的主要标签

Question

假设我有如下代码；

  <div>       
    <span>SELECT1</span>          
        <div>
          <input type="checkbox" value="option1" name="option1">
          <span>option1</span>  
        </div>   
        <div>     
          <input type="checkbox" value="option2" name="option2">
          <span>option2</span>     
        </div>
       <span>SELECT2</span>          
        <div>
          <input type="checkbox" value="option3" name="option3">
          <span>option3</span>  
        </div>   
        <div>     
          <input type="checkbox" value="option4" name="option4">
          <span>option4</span>     
        </div>
   </div>

如果至少选中了一个相关选项，是否有办法突出显示相关的“SELECT1”或“SELECT2”？在我的情况下，可以为标签 options1,2 和 option3,4 这样做，但是，SELECT1 和 SELECT2 如何使用 css 或 jquery/js？

提前致谢

Answer 1

你可以很容易地做到这一点:

    $('input[type="checkbox"]').change(function(){
    if($('input[type="checkbox"]').is(':checked')){
    $('.title').css('color','red');
    }
    else{
    $('.title').css('color','black');
    }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>       
     
    
           <span class="title">SELECT</span>          
                <div>
                  <input type="checkbox" value="option1" name="option1">
                  <span>option1</span>  
                </div>   
                <div>     
                  <input type="checkbox" value="option2" name="option2">
                  <span>option2</span>     
                </div>
           </div>