チェックボックス複数値の色div

Question

私は3つのチェックボックスを持っています 少なくとも1つの値がチェックされている場合、div 'adi'の色は赤で変わりますが、それらをすべてチェックしてそのうちの1つをオフにすると、 。 私はこれは私がすべての3つの値

$("input[type='checkbox']").change(function(){ 
 
    if($(this).is(":checked")){ 
 
     $('.adi').addClass("redBackground"); 
 
    }else{ 
 
     $('.adi').removeClass("redBackground"); 
 
    } 
 
});

.redBackground{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><input type='checkbox' name='groupid' value='1'>1</div> 
 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
 
<div><input type='checkbox' name='groupid' value='3'>3</div> 
 

 
<div class="adi"> 
 

 
asdasdas 
 
</div>

Answer 1

が$chb.filter(":checked").lengthとブール行うに.toggleClass("className", boolean)ため> 0を使用してIZEと確認入力の長さを計算し、既にチェックを外す必要があります後にのみ起こるしたいです仕事。

var $chb = $("input[name='groupid']"); 
 

 
$chb.on("change", function(){ 
 
    $('.adi').toggleClass("redBackground", $chb.filter(":checked").length > 0); 
 
});

.redBackground{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><input type='checkbox' name='groupid' value='1'>1</div> 
 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
 
<div><input type='checkbox' name='groupid' value='3'>3</div> 
 

 
<div class="adi"> 
 

 
asdasdas 
 
</div>

Answer 2

あなたはこの聖霊降臨祭試すことができます。確認のチェックボックスの数がゼロの場合は、前に確認する必要があり、その後、あなたが削除することができるならば、あなたの他の部分では

$("input[type='checkbox']").change(function(){  
    var checked_count = $('input[type="checkbox"]:checked').length; 
    if (checked_count>0) { 
      $('.adi').addClass("redBackground"); 
    }else{ 
      $('.adi').removeClass("redBackground"); 
    } 
}); 

Answer 3

をクラス：

$("input[type='checkbox']").change(function(){ 
 
    if($(this).is(":checked")){ 
 
    $('.adi').addClass("redBackground"); 
 
    } else { 
 
    if ($("input[type='checkbox']:checked").length == 0) { 
 
     $('.adi').removeClass("redBackground"); 
 
    } 
 
    } 
 
});

.redBackground{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div><input type='checkbox' name='groupid' value='1'>1</div> 
 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
 
<div><input type='checkbox' name='groupid' value='3'>3</div> 
 

 
<div class="adi"> 
 

 
    asdasdas 
 
</div>

Answer 4

このお試しください：if文ちょうどあなたのJSコードに1を追加

$(document).ready(function() { 
 
    
 
    $("input[type='checkbox']").change(function(){ 
 
     
 
     $(".adi").toggleClass("redBackground", $("input[type='checkbox']:checked").length > 0) 
 
     
 
     
 
    }) 
 
    
 
})

.redBackground{ 
 
background-color:red; 
 
}

<div><input type='checkbox' name='groupid' value='1'>1</div> 
 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
 
<div><input type='checkbox' name='groupid' value='3'>3</div> 
 
<div class="adi"> 
 
asdasdas 
 
</div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 5

：

$(document).ready(function() { 

    $("input[type='checkbox']").change(function(){ 

    $(".adi").toggleClass("redBackground", $("input[type='checkbox']:checked").length > 0) 

    }) 

}) 

最終的なコードを

$("input[type='checkbox']").change(function(){ 
 
    if($(this).is(":checked")){ 
 
     $('.adi').addClass("redBackground"); 
 
    }else{ 
 
     if (!$("input[type='checkbox']:checked").length) 
 
      $('.adi').removeClass("redBackground"); 
 
    } 
 
});

.redBackground{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><input type='checkbox' name='groupid' value='1'>1</div> 
 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
 
<div><input type='checkbox' name='groupid' value='3'>3</div> 
 

 
<div class="adi"> 
 

 
asdasdas 
 
</div>

Answer 6

完全に機能するが、少しの猛烈なコード...

$(function() { 
 
    var chLst = [], 
 
     $notice = $("#notice"), 
 
     $chBx = $notice.next().children(); 
 
    $chBx.change(function() { 
 
    chLst[$chBx.index(this)] = !chLst[$chBx.index(this)]; 
 
    if (chLst.reduce((f,n)=>f||n)^$notice.is(".green")) $notice.toggleClass("green"); 
 
    }); 
 
});

#notice h1 { text-align:center } 
 
.green  { color:green  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="notice"> 
 
    <h1>SOME NOTIFICATION</h1> 
 
</div> 
 
<form> 
 
    <input type="checkbox" name="value" value="1"> Checkbox 1<br> 
 
    <input type="checkbox" name="value" value="2"> Checkbox 2<br> 
 
    <input type="checkbox" name="value" value="3"> Checkbox 3<br> 
 
    <input type="checkbox" name="value" value="4"> Checkbox 4<br> 
 
</form>