HTML 양식이 체크되지 않은 체크 박스를 전송합니다

Question

체크 박스가 많은 매우 긴 폼을 보내야합니다. 다음과 같이 영역별로 그룹화되어 있습니다.

<fieldset> 
    <legend>Whatever1</legend> 
    <div class="checkbox-list"> 
     <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label> 
     <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label> 
     <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label> 
     (more items) 
    </div> 
</fieldset> 
<fieldset> 
    <legend>Whatever2</legend> 
    <div class="checkbox-list"> 
     <label class="checkbox inline"><input type="checkbox" name="Interests" value="Architecture"> Architecture</label> 
     <label class="checkbox inline"><input type="checkbox" name="Interests" value="Audio"> Audio/vídeo</label> 
     <label class="checkbox inline"><input type="checkbox" name="Interests" value="Business"> Business</label> 
     (more items)    
    </div> 
</fieldset> 

양식이 훨씬 길지만 아이디어를 얻을 수 있습니다.

을 사용하면 내 django 백엔드는 Hobbies 배열로 그룹화 된 모든 체크 박스를 수신합니다. 이는 매우 편리하지만 체크되지 않은 체크 박스도 알아야합니다. hidden input trick에 대해 알고 있지만 체크 박스 그룹화의 일부로 value 필드를 사용하므로 유용하지 않습니다.

무엇을 할 수 있습니까?

Answer 1

글쎄, 내가 이미 알고있는 것처럼, 어떤 상자가 제멋대로 남아 있는지 브라우저에 묻는 방법은 근본적으로 없습니다.

이

• 당신이 당신의 서버 측에 표시 체크 박스의 목록을 다시 생성 : 여기
  는 그룹 로직을 아프게하지 않는 몇 가지 간단한 방법은 ... HTML 양식의 발명자를 비난. 이것은 어쨌든 많은 경우에 바람직합니다. 데이터가 사용자가 표시 한 것과 정확히 일치하도록 신뢰하지 않기 때문입니다. (Firebug와 같은 디버깅 도구를 사용하여 체크 박스 중 하나를 삭제하거나 새 체크 박스를 추가하면 어떻게되는지 생각해보십시오.)
• 각 체크 박스에 대해 에 해당하는 이름의 숨겨진 입력 포함 - "Interests_All", "Hobbies_All "등 - 그래서 당신은 두 개의 데이터 배열을 가지고 있습니다. 하나는 체크 된 항목을 포함하고 하나는 표시된 모든 것을 포함합니다.
• 확인란 대신 라디오 단추를 사용하십시오. 예, 다르게 표시되지만 배열에 추가하는 것만이 아니라 예/아니오 값을 제출하려는 기능을 가질 수 있습니다.

Answer 2

당신은 숨겨진 입력 필드를 추가하고 폼에서 체크되지 않은 체크 박스의 값을 포함하는 배열에 숨겨진 입력 값을 채우는 jQuery를 사용하여 제출 수 :

$("form").on("submit", function(e) { 
    e.preventDefault(); 

    // Create an array of unchecked Hobbies 
    var uncheckedValues = []; 
    $(this).find("input[name='Hobbies']:not(:checked)").each(function() { 
    uncheckedValues.push(this.value); 
    }); 

    // Set the uncheckedValues array as hidden input value 
    $("#your-hidden-input").val(uncheckedValues); 
    alert($("#your-hidden-input").val()); 

    // Handle the form submission 
    handleFormSubmit(); 
}); 

는 DEMO를 참조하십시오.

Answer 3

백엔드의 각 확인란에 기본 허위 값을 설정하는 것은 어떻습니까? 브라우저가 값을 전달한 경우 값을 true로 변경할 수 있습니다.

Answer 4

해결했습니다. 아이디어는 IMSoP의 대답에있었습니다. 여기에 내 해결책은 어쩌면 누군가를 도울 수있다 :

<fieldset> 
    <legend>Whatever1</legend> 
    <div class="checkbox-list"> 
     <input type="hidden" name="Hobbies_Arts"> 
     <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label> 
     <input type="hidden" name="Hobbies_Bars"> 
     <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label> 
     <input type="hidden" name="Hobbies_Books"> 
     <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label> 
     (more items) 
    </div> 
</fieldset> 

이렇게하면 장고 쪽에서 매우 쉽게 목록을 처리 할 수있다.