확인되지 않은 HTML 체크 박스 POST


303

기본적으로 선택되어있는 체크 박스가 많이 있습니다. 내 사용자는 아마도 확인란 중 몇 개를 선택 취소하고 나머지는 선택된 상태로 둡니다.

확인 된 확인란이 아닌 확인 되지 않은 확인란을 POST 형식으로 만드는 방법 있습니까?

답변:


217

다른 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;
}

58
이와 같은 마크 업 기반 솔루션을 사용하는 경우 다른 많은 답변에 따라 숨겨진 입력을 먼저 배치하는 것이 좋습니다. PHP를 사용하는 경우 마지막 값만 사용되므로 자바 스크립트 종속성을 제거 할 수 있습니다.
Ben

12
gamov, 당신은 틀렸다, 레이블은 입력 이름 속성이 아닌 id 속성을 기반으로 입력에 첨부된다
Justin Emery

14
믿기 ​​어려운 작가들이 이런 식으로 디자인했습니다. 왜 모든 입력 필드를 검사하지 않은 것에 대해 약간의 기본값으로 보내지 않겠습니까? 미리보기
Srneczek

34
너무 해키 느낌.
EralpB

65
checkbox요소 의 기본 디자인 이 끔찍 하다고 생각하는 유일한 사람 입니까? 그것들은 바이너리 컨트롤이므로 바이너리 값을 보내야합니다.
alexw

473

내가 지금까지 가장 좋아했던 솔루션은 선택되지 않은 확인란과 동일한 이름의 숨겨진 입력을 넣는 것입니다. 확인란을 선택하지 않으면 숨겨진 입력이 여전히 성공하여 서버로 전송되지만 확인란을 선택하면 숨겨진 입력보다 우선합니다. 이렇게하면 게시 된 데이터의 어떤 값이 체크 박스에서 올 것으로 예상했는지 추적 할 필요가 없습니다.

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

3
이제 질문을 다시 읽었으므로 이것이 실제로 원하는 것이 아닌 것 같습니다. 그러나 나는이 대답을 알아 내려고 할 때이 질문에 도달하여 다른 사람에게 유용 할 수 있습니다.
Sam

2
.NET은 다릅니다. 대신 stackoverflow.com/questions/7600817/…
KCD

121
확인란을 선택하면 브라우저가 숨겨진 값과 확인란 값을 모두 전송합니다. 그런 다음이 솔루션은이 두 값으로 서버에서 사후 변수를 처리합니다. 마지막 값 (예 : PHP) 만 사용하면 코드가 예상대로 작동합니다. 그러나 일부 서버는이를 다르게 처리하고 일부는 첫 번째 값을 선택하고 다른 일부는 두 값을 모두 목록 / 배열에 배치합니다.
Michael Ekoka

1
이 답변은 두 개의 동일한 명명 된 입력 중 하나에서만 릴레이 할 수 있다는 가정에 기반합니다.이 많은 투표를받은 이유를 모르겠습니다.
Muleskinner

7
@sam 어디에서 아이디어를 얻었는지 몰라? 둘 이상의 컨트롤 이름이 같으면 제출시 둘 다 서버에 전송됩니다 (체크 박스의 경우에만 체크 표시됨). 서버에서 처리 방법은 서버 측 구현에 따라 다릅니다. 나를 믿지 않으면 피들러와 같은 도구를 사용하여 트래픽을 모니터링하여 직접 볼 수 있습니다.
Muleskinner

75

바닐라 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 (설정)을 확인할 수 있습니다.


두 요소 사이에 공백이나 줄 바꿈이없는 이유는 무엇입니까?
Michael Potter

@ MichaelPotter : this.previousSibling은 형제로 공백을 얻으므로 작동하지 않습니다.
Marcel Ennix

4
아 이거 완벽 해! 중복 된 이름의 필드가있는 여러 필드 세트를 게시하는 문제를 해결합니다. 다른 솔루션은 없습니다. Marcel의 방법을 사용하면 게시 된 필드의 길이가 동일하게됩니다. 따라서이 시나리오는 다음과 같습니다. <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>* 새 줄이 있다고 가정합니다. 그들은 미니 마크 업 코드 블록에서 작동하지 않는 것 같습니다
Brian Layman

1
이것은 정답입니다. 배열과 함께 작동합니다 (ex / name = "soup []")
jdavid05

2
previousElementSibling대신 사용할 수 있습니다 previousSibling. 거의 모든 곳 에서 지원 되며 텍스트 노드는 무시합니다.
MarSoft

23

필자가 개인적으로 가장 좋아하는 것은 확인란을 선택하지 않은 경우 사용되는 것과 동일한 이름의 숨겨진 필드를 추가하는 것입니다. 그러나 해결책은 생각보다 쉽지 않습니다.

이 코드를 추가하면 :

<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로 이것을 테스트하려고 시도합니다.


2
ruby와 node.js는 중복 된 양식 필드의 마지막 값을 갖습니다. 이런 이유로 Ruby on Rails의 헬퍼 메소드는 이러한 방식으로 확인란을 구성합니다.
nzifnab

7
반올림-이것은 HTTP 매개 변수 오염이라는 공격을 기반으로하며 OWASP에 의해 분석되었습니다 : owasp.org/images/b/ba/AppsecEU09_CarettoniDiPaola_v0.8.pdf (페이지 9) 시스템 시스템과 그들이 어떻게 처리하는지 봅니다.
SimonSimCity

1
자바 서블릿은 전화하는 한 모든 것을 제공합니다.request.getParameterValues
mauhiz

20

이 문제에 대한 일반적인 기술은 각 확인란과 함께 숨겨진 변수를 전달하는 것입니다.

<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

위의 질문에 정확하게 대답하지는 않지만 유사한 기능을 수행하는 대체 수단을 제공합니다.


20

모든 확인란에 대해 숨겨진 필드를 만들 필요는 없습니다. 내 코드 만 복사하면됩니다. 그것은이 확인되지 않을 경우 체크 박스의 값을 변경합니다 value할당합니다 0확인란을 할당 해 조사 할 경우 value1

$("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');
        }
    })
})

1
이 솔루션은 숨겨진 필드로 오염 된 Dom보다 더 훌륭하고 우아하게 작동합니다.
Prasad Paranjape

9
양식을 제출하는 동안 상자가 일시적으로 선택됩니다. 이것은 사용자에게 혼란 스럽습니다.
마크 프레이저

12
$('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 배열 만


1
매우 훌륭한 솔루션이지만 제 경우에는 live ()가 작동하지 않으므로 on () 메서드를 사용했습니다. $ ( 'input [type = checkbox]'). on ( "change", function () {...}) ;
마사

4
LIVE는 더 이상 사용되지 않습니다. 더 이상 stackoverflow의 답변에 사용하지 마십시오. Amem.
Ismael

이 답변은 정말 최고입니다. 예상대로 작동합니다. 그룹 체크 박스에서도 마찬가지입니다.
Alemoh Rapheal Baja

11

양식의 제출 이벤트에서 일부 Javascript를 수행 할 수 있습니다. 그것은 당신이 할 수있는 전부입니다. 브라우저가 스스로 할 수있는 방법은 없습니다. 또한 Javascript가없는 사용자에게는 양식이 중단된다는 것을 의미합니다. 서버에 어떤 체크 박스가 있는지 아는 것이 더 낫습니다. 따라서 게시 된 양식 값 ( $_POSTPHP)에 없는 값 은 선택되지 않은 것으로 추론 할 수 있습니다 .



$_REQUEST스크립트가 두 가지 방법을 모두 지원하는 경우 일부 코드를 재사용 할 수 있으므로 좋은 방법입니다.
무효 성

9

실제로 다음을 수행합니다.

확인란 입력과 동일한 이름의 숨겨진 입력 필드를 갖습니다.

<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;
  }

배열에서 중복 값을 제거 하는 게시물에서 이것을 얻었습니다.


이름 필드 값에서 []의 목적은 무엇입니까?
Michael Potter

@MichaelPotter PHP로 포스트를 보낼 때`checkbox_name []
Twister1002

@ Twister1002, 이름에 []를 추가 할 목적이 아니라 name 속성의 목적을 설명했다고 생각합니다. 웹 검색을했는데 일부 사람들이 groupname [elementname]이라는 이름으로 필드를 그룹화하는 것처럼 보이지만 empty []에 대한 설명을 찾지 못했습니다.
Michael Potter

1
@MichaelPotter 죄송합니다, 그 말을 마치겠다고 생각했습니다. 그러나 분명히 아닙니다. 다시하겠습니다. PHP로 보내지면 PHP 프로세서는 그것을 배열로 읽습니다. 따라서 각 이름으로 checkbox_name[]각 값이 배열에 입력되어 끌어 올 수 있습니다. 예 : $_POST['checkbox_name'][0]같은 이름을 가진 필드 수의 증가와 함께 계속됩니다. 또 다른 예는 세 개의 필드 이름이 field_name[]있으면 field_namelike 의 두 번째 값을 얻을 수 있습니다 $_POST['field_name'][1]. 같은 이름을 가진 여러 필드가 있으면 그 목적이 놀랍습니다.
Twister1002

8

"저는 서버 접근 방식을 사용했습니다. 제대로 작동하는 것 같습니다. – 감사합니다. – reach4thelasers '09. 인용 된대로 : 자바 스크립트 솔루션은 서버 처리기 방법에 달려 있습니다 (확인하지 않았습니다)

와 같은

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";

8

나는이 질문이 3 세라는 것을 알고 있지만 꽤 잘 작동하는 솔루션을 찾았습니다.

$ _POST 변수가 지정되어 있는지 확인하고 변수에 저장할 수 있습니다.

$value = isset($_POST['checkboxname'] ? 'YES' : 'NO';

isset () 함수는 $ _POST 변수가 할당되었는지 확인합니다. 할당되지 않으면 논리적으로 확인란이 선택되어 있지 않습니다.


가장 많이 사용되는 응답은 스크린 리더에게는 끔찍한 솔루션이므로 훨씬 좋습니다.
케빈 워터 슨

7

여기에있는 대부분의 답변은 JavaScript 또는 중복 입력 컨트롤을 사용해야합니다. 때때로 이것은 서버 측에서 완전히 처리해야합니다.

이 일반적인 문제를 해결하기위한 (의도 된) 열쇠는 양식의 제출 입력 컨트롤이라고 생각합니다.

확인란의 확인되지 않은 값을 성공적으로 해석하고 처리하려면 다음 사항을 알고 있어야합니다.

  1. 확인란의 이름
  2. 양식 제출 입력 요소의 이름

양식이 제출되었는지 여부를 확인하여 (값이 제출 입력 요소에 지정됨) 선택하지 않은 선택란 값을 가정 할 수 있습니다 .

예를 들면 다음과 같습니다.

<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);
}

?>

초기 데이터는 각 페이지로드에로드 될 수 있지만 양식을 제출 한 경우에만 수정해야합니다. 확인란의 이름은 미리 알려져 있기 때문에 개별적으로 순회 및 검사 할 수 있으므로 개별 값이 없으면 선택되지 않은 것으로 나타납니다.


6

샘의 버전을 먼저 시도했습니다. 좋은 생각이지만 양식에 같은 이름을 가진 여러 요소가 있습니다. 이름을 기준으로 요소를 찾는 자바 스크립트를 사용하면 이제 요소 배열을 반환합니다.

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]);
}

6

또한 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) 목록 데이터 유형을 작성하려면 쉼표를 구분 기호로 사용하여 문자열을 분할 (분해)해야합니다. ( [])

이제 확인란이 숨겨진 요소 앞에 있으면 목록의 첫 번째 인덱스를 가져오고 확인란이 숨겨진 요소 뒤에 있으면 마지막 인덱스를 가져올 수 있습니다.

백엔드 매개 변수 처리

이미지 소스


6

이 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

5

form.submit 이벤트를 가로 채서 제출하기 전에 역 확인할 수도 있습니다.

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});

4

나는이 질문이 오래되었고 많은 답변을 보았지만 어쨌든 내 돈을 줄 것이다. 일부는 지적했듯이 양식의 '제출'이벤트에 대한 자바 스크립트 솔루션에 대한 투표입니다. 입력을 두 배로 늘리지 마십시오 (특히 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
)

내 편에서 일하지 않아 이 작업을 시도했지만 여전히 모든 확인란을 게시하지는 않았습니다. [코드] $ ( "# filter input"). change (function (e) {console.log ( 'sublmit'); var b = $ ( "input : checkbox : not (: checked)"); $ (b) .each (function () {$ (this) .val (2); $ (this) .attr ( "checked", true);}); $ ( "# filter"). submit ();}); [/ code]
lio

나를 위해 트릭을 했어. 유일한 제출-양식 제출시 모든 확인란이 선택되었습니다. 이것은 사용자에게 혼란을 줄 수 있지만 양식 제출 후 페이지가 다시로드되기 때문에 사소한 문제라고 생각합니다.
Oksana Romaniv

Oksana가 말했듯이, 사용자가 어떤 조건에 동의하지 않고 양식을 제출하도록 허용하지 않은 필수 확인란을 포함하여 모든 확인란을 선택합니다.
bskool

4
$('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);
        }
    })
});

1
이것은 나를 위해 일했습니다. .submit을 사용하는 대신 .click을 사용합니다. 그런 다음 확인란을 비활성화하는 비트를 제거하십시오. 그 후 그것은 완벽하게 작동합니다.
cgrouge

1
최상의 답변 각 입력에 대해 다른 숨겨진 입력을 추가 할 필요가 없습니다
Sky

3

내가 한 일은 약간 달랐습니다. 먼저 모든 체크되지 않은 확인란의 값을 변경했습니다. "0"으로 설정 한 다음 모두 선택하면 값이 제출됩니다.

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}


답변은 좋지만 @Rameez SOOMRO의 답변과 다른 점을 알고 싶습니다.
Imran Qamer

최종 결과와 비슷하지만이 방법으로 만 체크 된 확인란의 값을 변경하지 않습니다.
Seborreia

2

나는 $ _POST를 대조하는 것을 선호합니다

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

POST에 'checkboxname'값이 없으면 확인되지 않았으므로 값을 지정하십시오.

ckeckbox 값의 배열을 만들고 값이 존재하는지 확인하는 기능을 만들 수 있습니다.


1

Ajax 작업의 예는 .val () 대신 jQuery를 사용하는 is ( ': checked')입니다.

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

params는 TRUE 또는 FALSE로 값을 얻습니다 ..


1

확인란은 일반적으로 데이터베이스에 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');
  }
});

1

모든 답변은 훌륭하지만 이름이 같은 양식에 여러 개의 확인란이 있고 각 확인란의 상태를 게시하려는 경우. 그런 다음 확인란 (숨겨진 것과 관련된 이름)으로 숨겨진 필드를 배치 하여이 문제를 해결했습니다.

<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);
});

이제 확인란을 변경하면 관련 숨겨진 필드의 값이 변경됩니다. 그리고 서버에서는 확인란 대신 숨겨진 필드 만 볼 수 있습니다.

이것이 누군가가 이런 유형의 문제를 해결하는 데 도움이되기를 바랍니다. 응원 :)


1

확인란의 문제는 선택하지 않으면 양식과 함께 게시되지 않는다는 것입니다. 확인란을 선택하고 양식을 게시하면 양식을 처리하는 데 사용할 수있는 $ _POST 변수에 확인란의 값이 표시됩니다.이 확인란을 선택하지 않으면 $ _POST 변수에 값이 추가되지 않습니다.

PHP에서는 일반적으로 확인란 요소에서 isset () 검사를 수행하여이 문제를 해결할 수 있습니다. 예상 한 요소가 $ _POST 변수에 설정되어 있지 않으면 확인란이 선택되어 있지 않으며 값이 false 일 수 있습니다.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

그러나 동적 양식을 만든 경우 확인란의 이름 속성을 항상 알 수는 없으며 확인란의 이름을 모르면 isset 함수를 사용하여 전송 여부를 확인할 수 없습니다 $ _POST 변수


1
function SubmitCheckBox(obj) {
     obj.value   = obj.checked ? "on" : "off";
     obj.checked = true;
     return obj.form.submit();
}

<input type=checkbox name="foo" onChange="return SubmitCheckBox(this);">

0

더 나은 해결 방법이 있습니다. 우선 체크 된 체크 박스에만 이름 속성을 제공하십시오. 그런 다음 submitJavaScript function를 통해 선택하지 않은 모든 확인란을 선택하십시오. 그래서 당신 이 속성 을 가진 사람들 submit에서 검색됩니다 .form collectionname

  //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);
                   });

장점 : 숨겨진 상자를 추가로 만들거나 조작 할 필요가 없습니다.


0

@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>

0

@vishnu의 답변의 jQuery 버전.

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

jQuery 1.5 이하를 사용하는 경우 .prop () 대신 .attr () 함수를 사용하십시오


0

이 솔루션은 @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);

0

따라서이 솔루션은이 질문에 과잉이지만 테이블의 다른 행에 대해 여러 번 발생하는 동일한 확인란이있을 때 도움이되었습니다. 확인란이 표시된 행을 알고 확인란의 상태 (확인 / 선택 취소)를 알아야했습니다.

내가 한 것은 내 확인란 입력에서 이름 속성을 가져 와서 동일한 클래스를 모두 제공하고 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 값이있는 연관 배열이 생깁니다. 그런 다음 현재 데이터베이스 값을 살펴보고 비교하는 것이 매우 쉽습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.