Question

我有两个复选框列表，当选中任何两个列表中的任何复选框时，我都会通过此事件调用方法

 $("input[type='checkbox']").change(function () {
            var val = $(this).val();
            if (this.checked) // if changed state is "CHECKED"
            {
                MainClass.onLayer(val);

                // do the magic here
            } else {
                if (val != undefined) {
                    MainClass.offLayer(val);
                }
    //            alert("false");
            }
        });
    });

这是我的复选框列表的样子：

    <div class="tabBox_slide">
          <div class="tabcard active">
            <div class="titleList"><span class="list-plus"></span> Census</div>
            <div class="containerGeoFeture">
              <ul>
                <li>
                  <label for="IndiaBoundary">
                    <input type="checkbox" name="IndiaBoundary"  id="IndiaBoundary"/>
                    <span class="checkmark"></span> India Boundary </label>
                  <span class="bgcolor_boundary "></span> 
                  </li>
                  <li>
                  <label for="IndiaBoundary2">
                    <input type="checkbox" name="IndiaBoundary"  id="IndiaBoundary2"/>
                    <span class="checkmark"></span> India Boundary </label>
                  <span class="bgcolor_boundary "></span> 
                  </li>


              </ul>
            </div>
          </div>
<div class="tabcard">
        <div class="titleList"><span class="list-plus"></span> GPS</div>
        <div class="containerGeoFeture">
          <ul>
            <li class="gpsstyle">

              <label for="gps">
                <input type="checkbox" name="gps"  id="gps"/>
                <span class="checkmark"></span> GPS </label>
              <span class="bgcolor_boundary "></span> 
              </li>

          </ul>
        </div>
      </div>

所以现在的问题是需要为两个复选框列表分别调用方法？我该怎么做？

Answer 1

我在div中添加id即可设置方式！

$("#tab1 input[type=checkbox]").each(function () {
    });
    $("#tab2 input[type=checkbox]").each(function () {
    });



   <div class="tabBox_slide">
          <div class="tabcard active">
            <div class="titleList"><span class="list-plus"></span> Census</div>
            <div class="containerGeoFeture" id="tab1">
              <ul>
                <li>
                  <label for="IndiaBoundary">
                    <input type="checkbox" name="IndiaBoundary"  id="IndiaBoundary"/>
                    <span class="checkmark"></span> India Boundary </label>
                  <span class="bgcolor_boundary "></span> 
                  </li>
                  <li>
                  <label for="IndiaBoundary2">
                    <input type="checkbox" name="IndiaBoundary"  id="IndiaBoundary2"/>
                    <span class="checkmark"></span> India Boundary </label>
                  <span class="bgcolor_boundary "></span> 
                  </li>


              </ul>
            </div>
          </div>
<div class="tabcard">
        <div class="titleList"><span class="list-plus"></span> GPS</div>
        <div class="containerGeoFeture" id="tab2">
          <ul>
            <li class="gpsstyle">

              <label for="gps">
                <input type="checkbox" name="gps"  id="gps"/>
                <span class="checkmark"></span> GPS </label>
              <span class="bgcolor_boundary "></span> 
              </li>

          </ul>
        </div>
      </div>

Answer 2

您可以为复选框指定其他名称或ID，并相应地调用函数

$（“ input [name ='checkbox1']”））。change（function（）{

}

$（“ input [name ='checkbox2']”）。change（function（）{

}

为两个复选框列表调用不同的方法

2 个答案: