2016-09-26 100 views
0

我有兩個WebGrid列MVC項目上的WebGrid。第一列摺疊子數據,另一列用於複選框。檢查SubCheckbox上的所有複選框

該複選框將檢查其子數據上的所有複選框。問題是我無法選擇其子複選框上的所有數據。這是我的示例代碼:

//This colum will generate checkbox for the main data 
    wbclCol.Add(new WebGridColumn 
{ 
    ColumnName = "", 
    Header = "", 
    CanSort = false, 
    Format = (objChildItem) => 
    { 
     StringBuilder strbHtml = new StringBuilder(); 
     strbHtml.Append("<input class='obj-parmain' name='lngID' value='" + objChildItem.lngPARID + "' data-pardata='" + objChildItem.lngID+ "' data-show='True' type='checkbox' ></input>"); 

     return new MvcHtmlString(strbHtml.ToString()); 
    } 
}); 

//This column will generate another column for the sub-data: 
wbclCol.Add(new WebGridColumn 
{ 
    ColumnName = "", 
    Header = "", 
    CanSort = false, 
    Format = (objChildItem) => 
    { 
     StringBuilder strbHtml = new StringBuilder(); 
     strbHtml.Append("<input class='obj-parsub' name='lngID' value='" + objChildItem.lngPARID + "' data-pardata='" + objChildItem.lngID+ "' data-show='True' type='checkbox' ></input>"); 

     return new MvcHtmlString(strbHtml.ToString()); 
    } 
}); 

這是我的javascript選擇在類的所有複選框:OBJ-parsub當我帶班複選框:OBJ-parmain被檢查

function fncParMainCheck() { 
     $(document).off('click', '.obj-parmain'); 
     $(document).on('click', '.obj-parmain', function (e) { 
      var blIsCheck = $(this).is(':checked'); 
      if (blIsCheck) { 
       //var objNext = $('.obj-parsub').nextAll(); 
       //var objNextMain = $(this).siblings().nextAll().find('.obj-parsub'); 
       //var objNextMain = $(this).closest('.obj-parmain').find('.obj-parsub').prop('checked', this.checked); 
       $(this).closest('.obj-parmain').find('.obj-parsub').parent().parent().nextAll().prop('checked', this.checked); 
       //$(objNextMain).prop('checked', blIsCheck); 
      } 
     }); 
    } 

回答

1

嘗試使用此代碼。首先你檢查你的複選框是否被選中。

$(document).on('change', '.obj-parmain', function (e) { 
if ($(this).is(':checked')){ 
$('input:checkbox.obj-parsub').prop('checked', $(this).prop('checked')); 
} 
else{ 
    // uncheck logic 
    } 
}); 
+0

我試過這個,但類複選框obj-parsub沒有檢查。 –

+0

檢查我的更新代碼。你想檢查與obj-parsub類的所有複選框? –

+0

您的代碼正常工作。我測試了它。感謝您的幫助。 –

0

嘗試這樣

$(document).on('change', '.obj-parmain', function (e) { 
$('.obj-parsub input[type="checkbox"]').prop('checked', $(this).prop('checked')); 
}); 
+0

我試過,但該類複選框OBJ-parsub不檢查。 –

+0

嘗試上面的代碼..... – Shibon

0

如果遇到同樣的問題,這個工作得很好:

function fncParMainCheck() { 
     $(document).off('click', '.obj-parmain'); 
     $(document).on('click', '.obj-parmain', function() { 
      var blIsCheck = $(this).is(':checked'); 
      if (blIsCheck) { 
       //This will look for the sublist of checkbox that is under class name obj-parsub and checks everything 
       var objNext = $(this).parent().parent().find('.obj-parsub'); 
       $(objNext).prop('checked', blIsCheck); 
      } 
     }); 
    }