답변:
다른 ID로 확인란에 숨겨진 입력을 추가하십시오.
<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>
양식을 제출하기 전에 확인 된 조건에 따라 숨겨진 입력을 비활성화하십시오.
if(document.getElementById("testName").checked) {
document.getElementById('testNameHidden').disabled = true;
}
checkbox
요소 의 기본 디자인 이 끔찍 하다고 생각하는 유일한 사람 입니까? 그것들은 바이너리 컨트롤이므로 바이너리 값을 보내야합니다.
내가 지금까지 가장 좋아했던 솔루션은 선택되지 않은 확인란과 동일한 이름의 숨겨진 입력을 넣는 것입니다. 확인란을 선택하지 않으면 숨겨진 입력이 여전히 성공하여 서버로 전송되지만 확인란을 선택하면 숨겨진 입력보다 우선합니다. 이렇게하면 게시 된 데이터의 어떤 값이 체크 박스에서 올 것으로 예상했는지 추적 할 필요가 없습니다.
<form>
<input type='hidden' value='0' name='selfdestruct'>
<input type='checkbox' value='1' name='selfdestruct'>
</form>
바닐라 JavaScript를 사용하여 해결했습니다.
<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">
이 두 입력 요소 사이에 공백이나 줄 바꿈이 없도록주의하십시오!
this.previousSibling.previousSibling
"상위"요소를 얻는 데 사용할 수 있습니다 .
PHP를 사용하면 이름이 지정된 숨겨진 필드에서 0 (설정되지 않음) 또는 1 (설정)을 확인할 수 있습니다.
<fieldset name='fs1'> <input type="text" name="somefield[]"> <input type="checkbox" name="live[]"> </fieldset> <fieldset name='fs2'> <input type="text" name="somefield[]"> <input type="checkbox" name="live[]"> </fieldset>
* 새 줄이 있다고 가정합니다. 그들은 미니 마크 업 코드 블록에서 작동하지 않는 것 같습니다
필자가 개인적으로 가장 좋아하는 것은 확인란을 선택하지 않은 경우 사용되는 것과 동일한 이름의 숨겨진 필드를 추가하는 것입니다. 그러나 해결책은 생각보다 쉽지 않습니다.
이 코드를 추가하면 :
<form>
<input type='hidden' value='0' name='selfdestruct'>
<input type='checkbox' value='1' name='selfdestruct'>
</form>
브라우저는 실제로 당신이하는 일에 신경 쓰지 않을 것입니다. 브라우저는 두 매개 변수를 모두 서버로 보내며 서버는이 매개 변수로 수행 할 작업을 결정해야합니다.
예를 들어 PHP는 마지막 값을 사용할 값으로 사용합니다 ( 중복 HTTP GET 쿼리 키의 신뢰할 수있는 위치 참조 )
그러나 (Java 기반) 함께 작업 한 다른 시스템은 그 방법을 사용합니다. 첫 번째 가치 만 제공합니다. .NET은 대신 두 요소를 모두 가진 배열을 제공합니다.
언젠가 node.js, Python 및 Perl로 이것을 테스트하려고 시도합니다.
request.getParameterValues
이 문제에 대한 일반적인 기술은 각 확인란과 함께 숨겨진 변수를 전달하는 것입니다.
<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>
서버 측에서 먼저 숨겨진 변수 목록을 감지하고 숨겨진 변수 각각에 대해 해당 확인란 항목이 양식 데이터로 제출되는지 확인합니다.
서버 측 알고리즘은 다음과 같습니다.
for input in form data such that input.name endswith .hidden
checkboxName = input.name.rstrip('.hidden')
if chceckbName is not in form, user has unchecked this checkbox
위의 질문에 정확하게 대답하지는 않지만 유사한 기능을 수행하는 대체 수단을 제공합니다.
모든 확인란에 대해 숨겨진 필드를 만들 필요는 없습니다. 내 코드 만 복사하면됩니다. 그것은이 확인되지 않을 경우 체크 박스의 값을 변경합니다 value
할당합니다 0
확인란을 할당 해 조사 할 경우 value
에1
$("form").submit(function () {
var this_master = $(this);
this_master.find('input[type="checkbox"]').each( function () {
var checkbox_this = $(this);
if( checkbox_this.is(":checked") == true ) {
checkbox_this.attr('value','1');
} else {
checkbox_this.prop('checked',true);
//DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA
checkbox_this.attr('value','0');
}
})
})
$('input[type=checkbox]').on("change",function(){
var target = $(this).parent().find('input[type=hidden]').val();
if(target == 0)
{
target = 1;
}
else
{
target = 0;
}
$(this).parent().find('input[type=hidden]').val(target);
});
<p>
<input type="checkbox" />
<input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
<input type="checkbox" />
<input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
<input type="checkbox" />
<input type="hidden" name="test_checkbox[]" value="0" />
</p>
확인란의 이름을 생략하면 전달되지 않습니다. test_checkbox 배열 만
양식의 제출 이벤트에서 일부 Javascript를 수행 할 수 있습니다. 그것은 당신이 할 수있는 전부입니다. 브라우저가 스스로 할 수있는 방법은 없습니다. 또한 Javascript가없는 사용자에게는 양식이 중단된다는 것을 의미합니다. 서버에 어떤 체크 박스가 있는지 아는 것이 더 낫습니다. 따라서 게시 된 양식 값 ( $_POST
PHP)에 없는 값 은 선택되지 않은 것으로 추론 할 수 있습니다 .
$_REQUEST
스크립트가 두 가지 방법을 모두 지원하는 경우 일부 코드를 재사용 할 수 있으므로 좋은 방법입니다.
실제로 다음을 수행합니다.
확인란 입력과 동일한 이름의 숨겨진 입력 필드를 갖습니다.
<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />
그런 다음 먼저 게시 할 때 $ _POST 배열에서 가져온 중복 값을 제거하고 각 고유 값을 표시하는 것을 유추하십시오.
$posted = array_unique($_POST['checkbox_name']);
foreach($posted as $value){
print $value;
}
배열에서 중복 값을 제거 하는 게시물에서 이것을 얻었습니다.
checkbox_name[]
각 값이 배열에 입력되어 끌어 올 수 있습니다. 예 : $_POST['checkbox_name'][0]
같은 이름을 가진 필드 수의 증가와 함께 계속됩니다. 또 다른 예는 세 개의 필드 이름이 field_name[]
있으면 field_name
like 의 두 번째 값을 얻을 수 있습니다 $_POST['field_name'][1]
. 같은 이름을 가진 여러 필드가 있으면 그 목적이 놀랍습니다.
여기에있는 대부분의 답변은 JavaScript 또는 중복 입력 컨트롤을 사용해야합니다. 때때로 이것은 서버 측에서 완전히 처리해야합니다.
이 일반적인 문제를 해결하기위한 (의도 된) 열쇠는 양식의 제출 입력 컨트롤이라고 생각합니다.
확인란의 확인되지 않은 값을 성공적으로 해석하고 처리하려면 다음 사항을 알고 있어야합니다.
양식이 제출되었는지 여부를 확인하여 (값이 제출 입력 요소에 지정됨) 선택하지 않은 선택란 값을 가정 할 수 있습니다 .
예를 들면 다음과 같습니다.
<form name="form" method="post">
<input name="value1" type="checkbox" value="1">Checkbox One<br/>
<input name="value2" type="checkbox" value="1" checked="checked">Checkbox Two<br/>
<input name="value3" type="checkbox" value="1">Checkbox Three<br/>
<input name="submit" type="submit" value="Submit">
</form>
PHP를 사용할 때 어떤 확인란이 선택되었는지 감지하는 것은 매우 간단합니다.
<?php
$checkboxNames = array('value1', 'value2', 'value3');
// Persisted (previous) checkbox state may be loaded
// from storage, such as the user's session or a database.
$checkboxesThatAreChecked = array();
// Only process if the form was actually submitted.
// This provides an opportunity to update the user's
// session data, or to persist the new state of the data.
if (!empty($_POST['submit'])) {
foreach ($checkboxNames as $checkboxName) {
if (!empty($_POST[$checkboxName])) {
$checkboxesThatAreChecked[] = $checkboxName;
}
}
// The new state of the checkboxes can be persisted
// in session or database by inspecting the values
// in $checkboxesThatAreChecked.
print_r($checkboxesThatAreChecked);
}
?>
초기 데이터는 각 페이지로드에로드 될 수 있지만 양식을 제출 한 경우에만 수정해야합니다. 확인란의 이름은 미리 알려져 있기 때문에 개별적으로 순회 및 검사 할 수 있으므로 개별 값이 없으면 선택되지 않은 것으로 나타납니다.
샘의 버전을 먼저 시도했습니다. 좋은 생각이지만 양식에 같은 이름을 가진 여러 요소가 있습니다. 이름을 기준으로 요소를 찾는 자바 스크립트를 사용하면 이제 요소 배열을 반환합니다.
PHP에서 Shailesh의 아이디어를 해결했습니다. 내 코드는 다음과 같습니다.
/ * 원본이 있으면 '.hidden'필드를 삭제하고, 없으면 '.hidden'값을 사용하십시오. * / foreach ($ _ POST [ 'frmmain']을 $ field_name => $ value로) { // '.hidden'으로 끝나는 요소 만 봅니다. if (! substr ($ field_name, -strlen ( '. hidden'))) { 단절; } // '.hidden'없이 이름을 얻습니다. $ real_name = substr ($ key, strlen ($ field_name)-strlen ( '. hidden')); // 원본이 존재하지 않으면 '.hidden'값으로 '가짜'원본 필드를 만듭니다. if (! array_key_exists ($ real_name, $ POST_copy)) { $ _POST [$ real_name] = $ 값; } // '.hidden'요소 삭제 설정 해제 ($ _POST [$ field_name]); }
또한 JavaScript를 사용하여 추가 입력 필드를 게시하는 솔루션이 마음에 들지 않습니다.
백엔드에 사용하는 것에 따라 어떤 입력이 먼저되는지에 따라 달라집니다.
첫 번째 발생 (JSP)이 사용되는 서버 백엔드의 경우 다음을 수행해야합니다.
<input type="checkbox" value="1" name="checkbox_1"/>
<input type="hidden" value="0" name="checkbox_1"/>
마지막 발생이 사용 된 서버 백엔드 (PHP, Rails)의 경우 다음을 수행해야합니다.
<input type="hidden" value="0" name="checkbox_1"/>
<input type="checkbox" value="1" name="checkbox_1"/>
모든 발생이 목록 데이터 유형 ( []
, array
)으로 저장되는 서버 백엔드의 경우 . (파이썬 / 조프)
원하는 순서대로 게시 할 수 있습니다 checkbox
. type 속성 을 사용하여 입력에서 값을 가져 오면 됩니다. 따라서 확인란이 숨겨진 요소 앞에있는 경우 목록의 첫 번째 색인과 확인란이 숨겨진 요소 뒤에있는 경우 마지막 색인입니다.
모든 항목이 쉼표로 연결된 서버 백엔드 (ASP.NET/IIS) 목록 데이터 유형을 작성하려면 쉼표를 구분 기호로 사용하여 문자열을 분할 (분해)해야합니다. ( []
)
이제 확인란이 숨겨진 요소 앞에 있으면 목록의 첫 번째 인덱스를 가져오고 확인란이 숨겨진 요소 뒤에 있으면 마지막 인덱스를 가져올 수 있습니다.
이 jQuery 블록을 사용하면 제출시 체크되지 않은 모든 확인란에 숨겨진 입력을 추가합니다. 마크 업을 어지럽히고 나중에 추가 한 체크 박스에서이를 잊어 버릴 위험없이 매번 모든 체크 박스에 대해 항상 값을 제출할 수 있습니다. 또한 사용중인 백엔드 스택 (PHP, Ruby 등)에 관계없이 사용할 수 있습니다.
// Add an event listener on #form's submit action...
$("#form").submit(
function() {
// For each unchecked checkbox on the form...
$(this).find($("input:checkbox:not(:checked)")).each(
// Create a hidden field with the same name as the checkbox and a value of 0
// You could just as easily use "off", "false", or whatever you want to get
// when the checkbox is empty.
function(index) {
var input = $('<input />');
input.attr('type', 'hidden');
input.attr('name', $(this).attr("name")); // Same name as the checkbox
input.attr('value', "0"); // or 'off', 'false', 'no', whatever
// append it to the form the checkbox is in just as it's being submitted
var form = $(this)[0].form;
$(form).append(input);
} // end function inside each()
); // end each() argument list
return true; // Don't abort the form submit
} // end function inside submit()
); // end submit() argument list
나는이 질문이 오래되었고 많은 답변을 보았지만 어쨌든 내 돈을 줄 것이다. 일부는 지적했듯이 양식의 '제출'이벤트에 대한 자바 스크립트 솔루션에 대한 투표입니다. 입력을 두 배로 늘리지 마십시오 (특히 html과 PHP 코드가 혼합 된 긴 이름과 속성이있는 경우). , 0 값 (또는 '확인되지 않음'상태를 나타내는 데 필요한 값)을 할당 한 다음 속성 '확인 됨'을 true로 변경하십시오.
$('form').submit(function(e){
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).val(0); //Set whatever value you need for 'not checked'
$(this).attr("checked", true);
});
return true;
});
이렇게하면 $ _POST 배열이 다음과 같이됩니다.
Array
(
[field1] => 1
[field2] => 0
)
$('form').submit(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','1');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
checkbox.prop('disabled', true);
}
})
});
내가 한 일은 약간 달랐습니다. 먼저 모든 체크되지 않은 확인란의 값을 변경했습니다. "0"으로 설정 한 다음 모두 선택하면 값이 제출됩니다.
function checkboxvalues(){
$("#checkbox-container input:checkbox").each(function({
if($(this).prop("checked")!=true){
$(this).val("0");
$(this).prop("checked", true);
}
});
}
확인란은 일반적으로 데이터베이스에 Yes / No, Y / N 또는 1/0 값으로 저장된 이진 데이터를 나타냅니다. HTML 확인란은 확인란이 선택된 경우에만 서버에 값을 전송하는 데 좋지 않습니다! 즉, 다른 사이트의 서버 스크립트는 양수 (체크) 또는 음수 (체크되지 않은) 값을 저장할 수 있도록 웹 페이지에 가능한 모든 확인란이 무엇인지 미리 알고 있어야합니다. 실제로 음수 값만 문제가 있습니다 (사용자가 이전에 확인한 값을 선택 취소 한 경우 (사전)-이 이름을 보내야한다는 것을 미리 알 수없는 경우 아무것도 보내지 않을 때 서버가이를 알 수있는 방법). UPDATE 스크립트를 동적으로 생성하는 서버 측 스크립트가있는 경우 검사 된 Y 값과 검사되지 않은 (수신되지 않은) N 값을 설정하기 위해 모든 확인란을 수신해야 하는지를 모르기 때문에 문제가 있습니다.
데이터베이스에 'Y'및 'N'값을 저장하고 페이지의 선택 및 선택 취소 확인란을 통해 값을 나타내므로 'Y'및 'N'값으로 각 값 (확인란)에 대해 숨겨진 필드를 추가 한 다음 시각적으로 만 확인란을 사용합니다. 선택하고 간단한 JavaScript 함수 check ()를 사용하여 선택에 따라 if의 값을 설정하십시오.
<input type="hidden" id="N1" name="N1" value="Y" />
<input type="checkbox"<?php if($N1==='Y') echo ' checked="checked"'; ?> onclick="check(this);" />
<label for="N1">Checkbox #1</label>
내 웹 페이지의 각 확인란에 대해 하나의 JavaScript onclick 리스너와 call 함수 check ()를 사용하십시오.
function check(me)
{
if(me.checked)
{
me.previousSibling.previousSibling.value='Y';
}
else
{
me.previousSibling.previousSibling.value='N';
}
}
이 방법으로 'Y'또는 'N'값은 항상 서버 측 스크립트로 전송되며, 업데이트해야하는 필드가 무엇인지 알고 checbox "on"값을 'Y'로 변환하거나 수신 할 수없는 확인란을 'N'으로 변환 할 필요가 없습니다. '.
참고 : 공백이나 줄 바꿈도 형제이므로 여기에 .previousSibling.previousSibling.value가 필요합니다. 사이에 공백이 없으면 .previousSibling.value 만
이전과 같이 클릭 리스너를 명시 적으로 추가 할 필요가 없습니다 .jQuery 라이브러리를 사용하여 페이지의 모든 확인란의 값을 변경하는 기능이있는 클릭 리스너를 동적으로 추가 할 수 있습니다.
$('input[type=checkbox]').click(function()
{
if(this.checked)
{
$(this).prev().val('Y');
}
else
{
$(this).prev().val('N');
}
});
모든 답변은 훌륭하지만 이름이 같은 양식에 여러 개의 확인란이 있고 각 확인란의 상태를 게시하려는 경우. 그런 다음 확인란 (숨겨진 것과 관련된 이름)으로 숨겨진 필드를 배치 하여이 문제를 해결했습니다.
<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />
그런 다음 jquery 코드 아래에서 확인란의 변경 상태를 제어하십시오.
$(documen).on("change", "input[type='checkbox']", function() {
var checkbox_val = ( this.checked ) ? 1 : 0;
$(this).siblings('input.checkbox_handler').val(checkbox_val);
});
이제 확인란을 변경하면 관련 숨겨진 필드의 값이 변경됩니다. 그리고 서버에서는 확인란 대신 숨겨진 필드 만 볼 수 있습니다.
이것이 누군가가 이런 유형의 문제를 해결하는 데 도움이되기를 바랍니다. 응원 :)
확인란의 문제는 선택하지 않으면 양식과 함께 게시되지 않는다는 것입니다. 확인란을 선택하고 양식을 게시하면 양식을 처리하는 데 사용할 수있는 $ _POST 변수에 확인란의 값이 표시됩니다.이 확인란을 선택하지 않으면 $ _POST 변수에 값이 추가되지 않습니다.
PHP에서는 일반적으로 확인란 요소에서 isset () 검사를 수행하여이 문제를 해결할 수 있습니다. 예상 한 요소가 $ _POST 변수에 설정되어 있지 않으면 확인란이 선택되어 있지 않으며 값이 false 일 수 있습니다.
if(!isset($_POST['checkbox1']))
{
$checkboxValue = false;
} else {
$checkboxValue = $_POST['checkbox1'];
}
그러나 동적 양식을 만든 경우 확인란의 이름 속성을 항상 알 수는 없으며 확인란의 이름을 모르면 isset 함수를 사용하여 전송 여부를 확인할 수 없습니다 $ _POST 변수
더 나은 해결 방법이 있습니다. 우선 체크 된 체크 박스에만 이름 속성을 제공하십시오. 그런 다음 submit
JavaScript function
를 통해 선택하지 않은 모든 확인란을 선택하십시오. 그래서 당신 이 속성 을 가진 사람들 submit
에서 검색됩니다 .form collection
name
//removing name attribute from all checked checkboxes
var a = $('input:checkbox:checked');
$(a).each(function () {
$(this).removeAttr("name");
});
// checking all unchecked checkboxes
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).attr("checked", true);
});
장점 : 숨겨진 상자를 추가로 만들거나 조작 할 필요가 없습니다.
@cpburnz는 맞았지만 많은 코드를 사용했습니다. 적은 코드를 사용하는 동일한 아이디어입니다.
JS :
// jQuery OnLoad
$(function(){
// Listen to input type checkbox on change event
$("input[type=checkbox]").change(function(){
$(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
});
});
HTML (배열 이름을 사용하여 필드 이름 참고) :
<div>
<input type="checkbox" checked="checked">
<input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
<input type="checkbox">
<input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>
그리고 PHP의 경우 :
<div>
<input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
<input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>
이 솔루션은 @desw의 솔루션에서 영감을 받았습니다.
입력 이름이 "양식"인 경우 하나의 chekbox를 확인하자마자 chekbox 값과 배열 색인 연관이 손실되고 chekbox를 확인할 때마다이 "해리"가 한 단위 씩 증가합니다. 예를 들어 다음과 같이 일부 필드로 구성된 직원과 같은 것을 삽입하는 양식이 될 수 있습니다.
<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />
한 번에 세 명의 직원을 삽입하고 첫 번째 직원과 두 번째 직원이 한 명인 경우 5 요소 isSingle
배열로 끝나 므로 예를 들어 세 배열을 통해 한 번에 반복 할 수 없습니다 직원을 데이터베이스에 삽입하십시오.
쉬운 배열 후 처리로이를 극복 할 수 있습니다. 서버 측에서 PHP를 사용하고 있으며 다음과 같이했습니다.
$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
if($isSingle=='yes'){
unset($areSingles[$j-1]);
}
$j++;
}
$areSingles = array_values($areSingles);
따라서이 솔루션은이 질문에 과잉이지만 테이블의 다른 행에 대해 여러 번 발생하는 동일한 확인란이있을 때 도움이되었습니다. 확인란이 표시된 행을 알고 확인란의 상태 (확인 / 선택 취소)를 알아야했습니다.
내가 한 것은 내 확인란 입력에서 이름 속성을 가져 와서 동일한 클래스를 모두 제공하고 JSON과 동일한 데이터를 보유하는 숨겨진 입력을 만드는 것입니다.
HTML
<table id="permissions-table">
<tr>
<td>
<input type="checkbox" class="has-permission-cb" value="Jim">
<input type="checkbox" class="has-permission-cb" value="Bob">
<input type="checkbox" class="has-permission-cb" value="Suzy">
</td>
</tr>
</table>
<input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">
양식 제출시 실행할 Javascript
var perms = {};
$(".has-permission-checkbox").each(function(){
var userName = this.value;
var val = ($(this).prop("checked")) ? 1 : 0
perms[userName] = {"hasPermission" : val};
});
$("#has-permissions-values").val(JSON.stringify(perms));
json 문자열은 $ _POST [ "has-permissions-values"] 형식으로 전달됩니다. PHP에서 문자열을 배열로 디코딩하면 각 행과 해당하는 각 확인란의 true / false 값이있는 연관 배열이 생깁니다. 그런 다음 현재 데이터베이스 값을 살펴보고 비교하는 것이 매우 쉽습니다.