단일 체크 박스 이벤트에서 모든 asp.net 체크 박스를 선택 / 선택 해제하는 방법은 무엇입니까?

debugcn 에 게시 Dev

학습-과도한 사고-혼란

모든 확인란 div를 선택 / 선택 취소Select All 하려는 확인란 이름이 하나 있습니다.

내 확인란이 asp.net 컨트롤 runat=server이므로 클라이언트 측에서 처리하는 방법을 얻지 못했습니다.

이것은 내 코드입니다.

<asp:CheckBox onchange="Checkallcheckbox()" ID="chkAll" runat="server" Text="Parent" /> -- parent of all checkboxes.

---------Section 1 -----------
<div id="section1">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent1" runat="server" Text="Check All" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild1" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild2" runat="server" Text="Child 2" />
    </li>                                
</div>

---------Section 2 -----------
<div id="section2">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent2" runat="server" Text="Check all" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild3" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild4" runat="server" Text="Child 2" />
    </li>                                
</div>

function Checkallcheckbox() {
    // How to check/uncheck all checkbox on this event
}

AiApaec

ASP.NET (Webforms)에서 다음과 같은 서버 컨트롤을 사용할 때 :

<asp:CheckBox ID="chkAll" runat="server" Text="Parent" />

다음과 같이 클라이언트에서 렌더링됩니다.

<span id="somprefix_chkAll">
  <input type="checkbox" />
</span>

따라서 자바 스크립트에서 $ ( "# <% = chkAll.ClientID %>")를 사용하는 경우 실제로 해당 범위 요소 (id = "somprefix_chkAll")의 이벤트를 기다리고 있지만 이벤트가 트리거되지 않습니다. 변경 이벤트는 입력 요소에만 적용 되기 때문입니다 ( jQuery 문서 참조 ).

그러나 문제를 쉽게 해결할 수 있고 asp.net에서 일반 html 컨트롤을 사용할 수 있으며 서버 컨트롤 (속성 : runat = "server"를 통해)이 될 수도 있습니다. 즉, 컨트롤에 액세스 할 수 있습니다. 뒤에있는 코드에서. 예를 들어 다음을 사용할 수 있습니다.

<input type="checkbox" id="chkAll" runat="server" />

그리고 뒤에있는 코드에서 항상 액세스 할 수 있습니다.

//assigning:
this.chkAll.Checked = true;
//get:
var isChecked = this.chkAll.Checked;

위의 내용을 고려하여 코드를 변경하겠습니다.

function Checkallcheckbox(currentClickedCheckbox) {

	var section1Chks= $('#section1').find(':checkbox');
	var section2Chks= $('#section2').find(':checkbox');
	
	if($(currentClickedCheckbox).is(':checked')) {
		section1Chks.prop('checked', true);
		section2Chks.prop('checked', true);
	} else {
		section1Chks.prop('checked', false);
		section2Chks.prop('checked', false);
	}
}

function CheckAllInSection(currentClickedCheckbox) {
	var $currentChk = $(currentClickedCheckbox);
	var sectionChks= $currentChk.closest('div').find(':checkbox');
	var checkAll = $currentChk.is(':checked');
  sectionChks.prop('checked', checkAll);

}

<input type="checkbox" id="chkAll" onchange="Checkallcheckbox(this)"   runat="server" value="Parent" />
<br />
---------Section 1 -----------
<div id="section1">
    <li class="carousel-border">
	<input type="checkbox" id="chkParent1" runat="server" onchange="CheckAllInSection(this)" value="Check All" />
    </li>
    <li>
        <input type="checkbox" id="chkchild1" runat="server" value="Child 1" />
    </li>
    <li>
        <input type="checkbox" id="chkchild2" runat="server" value="Child 2" />
    </li>                                
</div>

---------Section 2 -----------
<div id="section2">
    <li class="carousel-border">
        <input type="checkbox" id="chkParent2" runat="server" onchange="CheckAllInSection(this)" value="Check All" />
    </li>
    <li>
        <input type="checkbox" id="chkchild3" runat="server" value="Child 3" />
    </li>
    <li>
        <input type="checkbox" id="chkchild4" runat="server" value="Child 4" />
    </li>                                
</div>

JSFiddle 데모를 참조하십시오 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-6

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사