Question

我有三个复选框如果选中至少一个值，则div的颜色为“adi”。红色变化，但是如果我检查它们并且我取消选中其中一个，颜色将恢复正常。我希望只有在我已经取消选中所有三个值

之后才能发生这种情况

＆＃13;

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

＆＃13;

.redBackground{
background-color:red;
}

＆＃13;

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

＆＃13;

Answer 1

使用$chb.filter(":checked").length > 0计算.toggleClass("className", boolean)和布尔 ize检查输入的长度，以便var $chb = $("input[name='groupid']"); $chb.on("change", function(){ $('.adi').toggleClass("redBackground", $chb.filter(":checked").length > 0 ); });完成工作。

＆＃13;

.redBackground{
background-color:red;
}

＆＃13;

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

＆＃13;

DECLARE @ActivityTypeID int =1
DECLARE @ColList VARCHAR(MAX)
DECLARE @ActivityDetailsQuery VARCHAR(MAX)
SELECT @ColList = ''''+ ActivityName + ''' as ActivityName ,''' + Description + ''' as Description'
        +CASE when StringField1 is not null then ',StringField1 AS '+ stringField1 else '' end
       + CASE when StringField2 is not null then ',StringField2 AS '+ stringField2 else '' end
       + CASE when StringField3 is not null then ',StringField3 AS '+ StringField2 else '' end
       + CASE when NumField1 IS NOT NULL then ',NumField1 AS '+ NumField1 else '' end
       + CASE when NumField2 IS NOT NULL then ',NumField2 AS '+ NumField2 else '' end
       + CASE when DttmField1 IS NOT NULL then ',DttmField1 AS '+ DttmField1 else '' end
       + CASE when DttmField2 IS NOT NULL then ',DttmField2 AS '+ DttmField2 else '' end
from dbo.Activity
where ActivityTypeID = @ActivityTypeID  

SET @ActivityDetailsQuery = 'SELECT '+ @ColList + ' FROM dbo.ActivityDetails WHERE ActivityTypeID = ' + CAST(@ActivityTypeID as VARCHAR(10))
EXEC(@ActivityDetailsQuery)

＆＃13;

Answer 2

你可以试试这个：

NSURLSession

Answer 3

在你的其他部分，如果你必须检查选中复选框的数量是否为零，那么你可以删除该类：

＆＃13;

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

＆＃13;

.redBackground{
  background-color:red;
}

＆＃13;

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

＆＃13;

Answer 4

试试这个：

$(document).ready(function() {

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

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

    })

})

最终代码：

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

只需在js代码中添加一个if语句：

$("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

功能齐全，但有点突破性的代码...

＆＃13;

$(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");
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

复选框多个值颜色div

6 个答案: