Question

我尝试检查是否选中了所有复选框并更改按钮的类别。但我的代码不起作用，我不知道为什么。

<input type="checkbox" id="check1" onchange="checkIfChecked();" class="checkThis" value="check 1"> Check 1<br />
<input type="checkbox" id="check2" onchange="checkIfChecked();" class="checkThis" value="check 2"> Check 2<br />
<input type="checkbox" id="check3" onchange="checkIfChecked();" class="checkThis" value="check 3"> Check 3<br />
<input type="checkbox" id="check4" onchange="checkIfChecked();" class="checkThis" value="check 4"> Check 4<br />
<input type="checkbox" id="check5" onchange="checkIfChecked();" class="checkThis" value="check 5"> Check 5<br /><br />
<a href="#" style="width:190px;display:block;" id="absenden" class="button-theme-disable">
    <span class="span_outer">
        <span class="span_right">
            <span class="span_left">
                <span style="width: 182px;" class="span_inner">Speichern & Schließen</span>
            </span>
        </span>
    </span>
</a>
    function checkIfChecked() {

    if ($('.checkThis input[type="checkbox"]').not(':checked').length == 0) {
        $('#absenden').removeClass('button-theme-disable');
        $('#absenden').addClass('button-theme');
    } else {
        $('#absenden').removeClass('button-theme');
        $('#absenden').addClass('button-theme-disable');
    }

};

以下是演示：https://jsfiddle.net/bt35r2tc/1/

我做错了什么？

Answer 1

.checkThis本身就是一个复选框。 .checkThis input[type="checkbox"]会在.checkThis中选中复选框。尝试以下。

function checkIfChecked() {
    if ($('.checkThis').not(':checked').length == 0) {
        $('#absenden').removeClass('button-theme-disable');
        $('#absenden').addClass('button-theme');
    } else {
        $('#absenden').removeClass('button-theme');
        $('#absenden').addClass('button-theme-disable');
    }
}

完整代码

＆＃13;

function checkIfChecked() {
  if ($('.checkThis').not(':checked').length == 0) {
    $('#absenden').removeClass('button-theme-disable');
    $('#absenden').addClass('button-theme');
  } else {
    $('#absenden').removeClass('button-theme');
    $('#absenden').addClass('button-theme-disable');
  }
}

＆＃13;

/* Disable Theme */

.button-theme-disable .span_outer .span_right {
  background: url(http://mirsoftware.de/daniel/buttonrechtsdisable.png) no-repeat scroll right center;
  text-decoration: none;
  height: 22px;
  display: block;
}

.button-theme-disable .span_outer .span_left {
  background: url(http://mirsoftware.de/daniel/buttonlinksdisable.png) no-repeat scroll left center;
  text-decoration: none;
  height: 22px;
  display: block;
  padding-left: 4px;
}

.button-theme-disable .span_outer .span_inner {
  background: url(http://mirsoftware.de/daniel/buttonmittedisable.png) repeat-x scroll 0 0;
  text-decoration: none;
  color: #878787;
  font-weight: bold;
  text-align: center;
  font-size: 8pt;
  height: 22px;
  display: block;
  padding-top: 4px;
  vertical-align: middle;
}


/*Normales Theme*/

.button-theme .span_outer .span_right {
  background: url(http://mirsoftware.de/daniel/buttonrechts.png) no-repeat scroll right center;
  text-decoration: none;
  height: 22px;
  display: block;
}

.button-theme .span_outer .span_left {
  background: url(http://mirsoftware.de/daniel/buttonlinks.png) no-repeat scroll left center;
  text-decoration: none;
  height: 22px;
  display: block;
  padding-left: 4px;
}

.button-theme .span_outer .span_inner {
  background: url(http://mirsoftware.de/daniel/buttonmitte.png) repeat-x scroll 0 0;
  text-decoration: none;
  color: #33427a;
  font-weight: bold;
  text-align: center;
  font-size: 8pt;
  height: 22px;
  display: block;
  padding-top: 4px;
  vertical-align: middle;
}

.button-theme:hover .span_outer:hover .span_right:hover {
  background: url(http://mirsoftware.de/daniel/buttonrechtsmo.png) no-repeat scroll right center;
  text-decoration: none;
  cursor: pointer;
  color: White;
}

.button-theme:hover .span_outer:hover .span_left:hover {
  background: url(http://mirsoftware.de/daniel/buttonlinksmo.png) no-repeat scroll left center;
  text-decoration: none;
  cursor: pointer;
  color: White;
}

.button-theme:hover .span_outer:hover .span_inner:hover {
  background: url(http://mirsoftware.de/daniel/buttonmittemo.png) repeat-x scroll 0 0;
  text-decoration: none;
  cursor: pointer;
  color: White;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" onchange="checkIfChecked();" class="checkThis" value="check 1"> Check 1
<br />
<input type="checkbox" id="check2" onchange="checkIfChecked();" class="checkThis" value="check 2"> Check 2
<br />
<input type="checkbox" id="check3" onchange="checkIfChecked();" class="checkThis" value="check 3"> Check 3
<br />
<input type="checkbox" id="check4" onchange="checkIfChecked();" class="checkThis" value="check 4"> Check 4
<br />
<input type="checkbox" id="check5" onchange="checkIfChecked();" class="checkThis" value="check 5"> Check 5
<br />
<br />
<a href="#" style="width:190px;display:block;" id="absenden" class="button-theme-disable">
    <span class="span_outer">
        <span class="span_right">
            <span class="span_left">
                <span style="width: 182px;" class="span_inner">Speichern & Schließen</span>
            </span>
        </span>
    </span>
</a>

＆＃13;

Answer 2

为什么不在Jquery中使用each，如下所示：

$(".checkThis").each(function(){
     if($(this).is(":checked")){     
         //checkbox is checked
     }else{
        //checkbox is not checked
     }
});

检查是否选中了所有复选框不起作用

2 个答案: