当我使用几个复选框时，如何更改类？

时间：2017-03-27 15:09:14

标签： jquery

我从Spring收到一些表，我有两个复选框。我需要在选中第一个复选框时执行，我将Class更改为OneClass，当选中第二个复选框时，我将Class更改为TwoClass，当两个复选框一起选中时，我将Class更改为ThreeClass。
http://jsfiddle.net/

我写了一些代码，如果我使用一个复选框，这段代码就可以了，但我不知道如何根据我上面描述的方式为两个复选框执行此代码

  $(".ifChange input[type=checkbox]:checked").each(function(){
            $(this).closest("tr").addClass("oneClass");
   });
  $(".ifChange input[type=checkbox]").change(function(){

     if($(this).is(":checked")) {
        $(this).closest("tr").addClass("oneClass");
    } else {
        $(this).closest("tr").removeClass("oneClass");
    }          
   });

2 个答案:

答案 0 :(得分：1)

如果选中所有复选框，则可以使用length属性进行检查。并在检查每个复选框后。我有一个你可以打电话的功能。试试下面的

＆＃13;
＆＃13; 
$(".ifChange input[type=checkbox]:checked").each(function(){
      checkClass($(this))
});
 
 $(".ifChange input[type=checkbox]").change(function(){
      checkClass($(this))
});

function checkClass(_self){
    _self.closest("tr").removeClass();
    checkboxLen = _self.closest("tr").find("input[type=checkbox]:checked").length;
    if(checkboxLen == 2){
    	 _self.closest("tr").addClass("threeClass");
    }else if(_self.closest("tr").find(".receiveOrder").is(":checked")){
    	_self.closest("tr").addClass("oneClass");
    }else if(_self.closest("tr").find(".sentOrderToCustomer").is(":checked")){
    	_self.closest("tr").addClass("twoClass");
    }  
}
＆＃13; 
table.ifChange tr.oneClass {
    background-color: #a39fa1;
}
table.ifChange tr.twoClass {
    background-color: #5da300;
}
table.ifChange tr.threeClass {
  background-color: #a34800;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table border="1" class="ifChange" style="margin-top: 20px">
        <tr>
            <td align="center">
                <span>Name One</span>
            </td>
            <td align="center">
                <span>phone One</span>
            </td>
            <td align="center">
                <span id="orderDate">oderDate</span>
            </td>
            <td align="center">
                <div class="receive">
                    <input type="checkbox" class="receiveOrder" name="receiveOrder"/>
                <br/><span>  Order on warehouse</span>
                </div>
            </td>
            <td align="center">
                <div class="sent">
                <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer"/>
                <br/><span>  Order sent</span>
                </div>
            </td>
            </tr>
            <tr>
            <td align="center">
                <span>Name Two</span>
            </td>
            <td align="center">
                <span>phone Two</span>
            </td>
            <td align="center">
                <span id="orderDate">oderDate Two</span>
            </td>
            <td align="center">
                <div class="receive">
                    <input type="checkbox" class="receiveOrder" name="receiveOrder"/>
                <br/><span>  Order on warehouse</span>
                </div>
            </td>
            <td align="center">
                <div class="sent">
                <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer" checked="checked"/>
                <br/><span>  Order sent</span>
                </div>
            </td>
            </tr>
            <tr>
            <td align="center">
                <span>Name Three</span>
            </td>
            <td align="center">
                <span>phone Three</span>
            </td>
            <td align="center">
                <span id="orderDate">oderDate three</span>
            </td>
            <td align="center">
                <div class="receive">
                    <input type="checkbox" class="receiveOrder" name="receiveOrder" checked="checked"/>
                <br/><span>  Order on warehouse</span>
                </div>
            </td>
            <td align="center">
                <div class="sent">
                <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer"/>
                <br/><span>  Order sent</span>
                </div>
            </td>
            </tr>
            <tr>
            <td align="center">
                <span>Name four</span>
            </td>
            <td align="center">
                <span>phone four</span>
            </td>
            <td align="center">
                <span id="orderDate">oderDate four</span>
            </td>
            <td align="center">
                <div class="receive">
                    <input type="checkbox" class="receiveOrder" name="receiveOrder" checked="checked"/>
                <br/><span>  Order on warehouse</span>
                </div>
            </td>
            <td align="center">
                <div class="sent">
                <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer" checked="checked"/>
                <br/><span>  Order sent</span>
                </div>
            </td>
            </tr>
            </table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

$(".ifChange input[type='checkbox']").change(function() {
  orderClasses($(this));
}).change();

function orderClasses($el) {
  var tr = $el.closest("tr"),
    receive = tr.find("input[type='checkbox'][name='receiveOrder']"),
    send = tr.find("input[type='checkbox'][name='sentOrderToCustomer']");

  tr.removeClass("oneClass twoClass threeClass");

  if (receive.is(":checked")) {
    if (send.is(":checked")) {
      tr.addClass("threeClass");
    } else {
      tr.addClass("oneClass");
    }
  } else if (send.is(":checked")) {
    tr.addClass("twoClass");
  }
}
table.ifChange tr.oneClass {
  background-color: #a39fa1;
}

table.ifChange tr.twoClass {
  background-color: #5da300;
}

table.ifChange tr.threeClass {
  background-color: #a34800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="ifChange" style="margin-top: 20px">
  <tr>
    <td align="center">
      <span>Name One</span>
    </td>
    <td align="center">
      <span>phone One</span>
    </td>
    <td align="center">
      <span id="orderDate">oderDate</span>
    </td>
    <td align="center">
      <div class="receive">
        <input type="checkbox" class="receiveOrder" name="receiveOrder" />
        <br/><span>  Order on warehouse</span>
      </div>
    </td>
    <td align="center">
      <div class="sent">
        <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer" />
        <br/><span>  Order sent</span>
      </div>
    </td>
  </tr>
  <tr>
    <td align="center">
      <span>Name Two</span>
    </td>
    <td align="center">
      <span>phone Two</span>
    </td>
    <td align="center">
      <span id="orderDate">oderDate Two</span>
    </td>
    <td align="center">
      <div class="receive">
        <input type="checkbox" class="receiveOrder" name="receiveOrder" />
        <br/><span>  Order on warehouse</span>
      </div>
    </td>
    <td align="center">
      <div class="sent">
        <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer" checked="checked" />
        <br/><span>  Order sent</span>
      </div>
    </td>
  </tr>
  <tr>
    <td align="center">
      <span>Name Three</span>
    </td>
    <td align="center">
      <span>phone Three</span>
    </td>
    <td align="center">
      <span id="orderDate">oderDate three</span>
    </td>
    <td align="center">
      <div class="receive">
        <input type="checkbox" class="receiveOrder" name="receiveOrder" checked="checked" />
        <br/><span>  Order on warehouse</span>
      </div>
    </td>
    <td align="center">
      <div class="sent">
        <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer" />
        <br/><span>  Order sent</span>
      </div>
    </td>
  </tr>
  <tr>
    <td align="center">
      <span>Name four</span>
    </td>
    <td align="center">
      <span>phone four</span>
    </td>
    <td align="center">
      <span id="orderDate">oderDate four</span>
    </td>
    <td align="center">
      <div class="receive">
        <input type="checkbox" class="receiveOrder" name="receiveOrder" checked="checked" />
        <br/><span>  Order on warehouse</span>
      </div>
    </td>
    <td align="center">
      <div class="sent">
        <input type="checkbox" class="sentOrderToCustomer" name="sentOrderToCustomer" checked="checked" />
        <br/><span>  Order sent</span>
      </div>
    </td>
  </tr>
</table>

相关问题
最新问题