2016年3月8日 星期二

JQuery-MenuTree勾選

<table>
  <caption>角色 - 新增</caption>
  <tr>
    <td>
      <fieldset>
        <br />角色名稱: <input type="text" value="" name="roleName"
          id="roleName" maxlength="50" /> <br />
        <legend>權限設定</legend>
        <div id="divTree">

          <ul>
            <li class="folder"><input type="checkbox" status="all"
              class="parent_B30000" id="B30000" name="access" value="B30000">分行管理
              <ul>

                <li><input type="checkbox" class="son_B30000" id="B31000"
                  name="access" value="B31000">強制開關機設定</li>

                <li><input type="checkbox" class="son_B30000" id="B32000"
                  name="access" value="B32000">定期開關機設定</li>

                <li><input type="checkbox" class="son_B30000" id="B33000"
                  name="access" value="B33000">預約開關機設定</li>

              </ul></li>
          </ul>

          <ul>
            <li class="folder"><input type="checkbox" status="all"
              class="parent_B50000" id="B50000" name="access" value="B50000">行員帳號權限管理
              <ul>

                <li><input type="checkbox" class="son_B50000" id="B51000"
                  name="access" value="B51000">帳號管理</li>

                <li><input type="checkbox" class="son_B50000" id="B52000"
                  name="access" value="B52000">角色維護</li>

              </ul></li>
          </ul>

        </div>
      </fieldset>
    </td>
  </tr>
  <tr>
    <td>
      <button type="reset" id="btnReset">重設</button>
      <button type="button" id="btnSubmit">新增</button>
    </td>
  </tr>
</table>
<script>

$( document ).ready(function() {
  $('#btnSubmit').click(function(){
    if($('#roleName').val()==""){
      alert("請輸入角色名稱!");
      return false ;
    }
    var chk = false ;
    $('input[type=checkbox]').each(function () {
        if($(this).prop("checked")){
      chk = true ;
      }
    })
    if(!chk){
      alert("請選擇權限!");
      return false ;
    }else{
      $('#myForm').submit();
    }
  })
  
  $('input[type=checkbox]').click(function(){
    var checkClass = $(this).attr("class");
    console.info(checkClass);
    var parentClass = checkClass.replace("son","parent");
    var tmp = 'input[type=checkbox].'+checkClass ;
    allChk = false ;
    $(tmp).each(function () {
      if($(this).prop("checked")){
        allChk = true ;
      }
      if (allChk){
        var tmp2 = 'input[type=checkbox].'+parentClass
        $(tmp2).prop("checked",true);
      }
      else{
        var tmp2 = 'input[type=checkbox].'+parentClass
        $(tmp2).prop("checked",false);
      }
    })
  })
  
  
  var parentItem = $('input[status="all"]');
  $(parentItem).click(function(){
    if ($(this).prop("checked")){
      var checkClass = $(this).attr("class");
      var sonClass = checkClass.replace("parent","son");
      var tmpSon = 'input[type=checkbox].'+sonClass  ;
      $(tmpSon).prop("checked",true);
    }else{
      var checkClass = $(this).attr("class");
      var sonClass = checkClass.replace("parent","son");
      var tmpSon = 'input[type=checkbox].'+sonClass  ;
      $(tmpSon).prop("checked",false);
    }
  })
})
</script>

1 則留言:

  1. Borgata Hotel Casino & Spa - Mapyro
    Hotel 당진 출장안마 Rooms at Borgata. Casino is an Atlantic City hotel with 2,750 rooms. The hotel has 1571 정읍 출장샵 rooms including 2,700 경산 출장안마 with free 오산 출장샵 WiFi. 충주 출장안마

    回覆刪除