Do hộp kiểm đầu vào chỉ đăng dữ liệu nếu chúng được chọn?

Đây có phải là hành vi tiêu chuẩn cho các trình duyệt chỉ gửi dữ liệu giá trị đầu vào hộp kiểm nếu nó được kiểm tra khi gửi biểu mẫu không?

Và nếu không có dữ liệu giá trị nào được cung cấp, giá trị mặc định luôn luôn "bật"?

Giả sử những điều trên là chính xác, đây có phải là hành vi nhất quán trên tất cả các trình duyệt không?

Có, hành vi tiêu chuẩn là giá trị chỉ được gửi nếu hộp kiểm được chọn. Điều này thường có nghĩa là bạn cần có một cách để nhớ những hộp kiểm bạn đang mong đợi ở phía máy chủ vì không phải tất cả dữ liệu đều quay trở lại từ biểu mẫu.

Giá trị mặc định luôn là "bật", giá trị này phải nhất quán trên các trình duyệt.

Điều này được đề cập trong đề xuất W3C HTML 4 :

Các hộp kiểm (và các nút radio) là công tắc bật / tắt có thể được bật bởi người dùng. Công tắc được "bật" khi thuộc tính đã kiểm tra của phần tử điều khiển được đặt. Khi một biểu mẫu được gửi, chỉ các điều khiển hộp kiểm "bật" có thể thành công.

Trong HTML, mỗi <input />phần tử được liên kết với một cặp giá trị và tên duy nhất (nhưng không phải là duy nhất). Cặp này được gửi trong yêu cầu tiếp theo (trong trường hợp này là phần thân yêu cầu POST) chỉ khi <input />"thành công".

Vì vậy, nếu bạn có những đầu vào này trong <form>DOM của bạn :

<input type="text"     name="one"   value="foo"                        />
<input type="text"     name="two"   value="bar"    disabled="disabled" />
<input type="text"     name="three" value="first"                      />
<input type="text"     name="three" value="second"                     />

<input type="checkbox" name="four"  value="baz"                        />
<input type="checkbox" name="five"  value="baz"    checked="checked"   />
<input type="checkbox" name="six"   value="qux"    checked="checked" disabled="disabled" />
<input type="checkbox" name=""      value="seven"  checked="checked"   />

<input type="radio"    name="eight" value="corge"                      />
<input type="radio"    name="eight" value="grault" checked="checked"   />
<input type="radio"    name="eight" value="garply"                     />

Sẽ tạo các cặp tên + giá trị này sẽ được gửi đến máy chủ:

one=foo
three=first
three=second
five=baz
eight=grault

Thông báo rằng:

• twovà sixbị loại vì họ có tập disabledthuộc tính.
• three đã được gửi hai lần vì nó có hai đầu vào hợp lệ có cùng tên.
• fourđã không được gửi bởi vì nó checkboxkhông phải làchecked
• sixđã không được gửi mặc dù là checkedvì disabledthuộc tính có quyền ưu tiên cao hơn.
• sevenkhông có name=""thuộc tính được gửi, vì vậy nó không được gửi.

Đối với câu hỏi của bạn: bạn có thể thấy rằng một hộp kiểm tra không được kiểm tra do đó sẽ không có cặp tên + giá trị được gửi đến máy chủ - nhưng các đầu vào khác có cùng tên sẽ được gửi cùng với nó.

Các khung như ASP.NET MVC giải quyết vấn đề này bằng cách (lén lút) ghép nối mọi checkboxđầu vào với hiddenđầu vào trong HTML được kết xuất, như vậy:

@Html.CheckBoxFor( m => m.SomeBooleanProperty )

Riders:

<input type="checkbox" name="SomeBooleanProperty" value="true" />
<input type="hidden"   name="SomeBooleanProperty" value="false" />

Nếu người dùng không chọn hộp kiểm, thì phần sau sẽ được gửi đến máy chủ:

SomeBooleanProperty=false

Nếu người dùng kiểm tra hộp kiểm, thì cả hai sẽ được gửi:

SomeBooleanProperty=true
SomeBooleanProperty=false

Nhưng máy chủ sẽ bỏ qua =falsephiên bản vì nó nhìn thấy =truephiên bản, và vì vậy nếu không thấy =truenó có thể xác định rằng hộp kiểm được hiển thị và người dùng không kiểm tra nó - trái ngược với các SomeBooleanPropertyđầu vào không được hiển thị.

Nếu hộp kiểm không được chọn thì nó không đóng góp vào dữ liệu được gửi khi gửi biểu mẫu.

Phần HTML5 4.10.22.4 Xây dựng bộ dữ liệu biểu mẫu mô tả cách xây dựng dữ liệu biểu mẫu:

Nếu bất kỳ điều kiện nào sau đây được đáp ứng, thì hãy bỏ qua các bước phụ cho phần tử này: [...]

Phần tử trường là một phần tử đầu vào có thuộc tính loại ở trạng thái Hộp kiểm và độ kiểm tra của nó là sai.

và sau đó giá trị mặc định onđược chỉ định nếu valuebị thiếu:

Mặt khác, nếu phần tử trường là một phần tử đầu vào có thuộc tính loại ở trạng thái Hộp kiểm hoặc trạng thái Nút Radio, thì hãy chạy các bước phụ được lồng thêm này:

Nếu phần tử trường có thuộc tính giá trị được chỉ định, thì hãy để giá trị là giá trị của thuộc tính đó; mặt khác, hãy để giá trị là chuỗi "bật".

Do đó, các hộp kiểm không được kiểm tra được bỏ qua trong quá trình xây dựng dữ liệu biểu mẫu.

Hành vi tương tự được yêu cầu trong HTML4 . Thật hợp lý khi mong đợi hành vi này từ tất cả các trình duyệt tuân thủ.

Các hộp kiểm đang đăng giá trị 'trên' khi và chỉ khi hộp kiểm được chọn. Ngay lập tức bắt giá trị hộp kiểm, bạn có thể sử dụng các đầu vào ẩn

JS :

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){ 
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

HTML :

<label>Active</label><input rel="active" type="checkbox" />

Đây có phải là hành vi tiêu chuẩn cho các trình duyệt chỉ gửi dữ liệu giá trị đầu vào hộp kiểm nếu nó được kiểm tra khi gửi biểu mẫu không?

Có, bởi vì nếu không, sẽ không có cách xác định chắc chắn liệu hộp kiểm có thực sự được kiểm tra hay không (nếu nó thay đổi giá trị, trường hợp có thể tồn tại khi giá trị mong muốn của bạn nếu nó được kiểm tra sẽ giống như hộp kiểm đổi sang).

Và nếu không có dữ liệu giá trị nào được cung cấp, giá trị mặc định luôn luôn "bật"?

Các câu trả lời khác xác nhận rằng "bật" là mặc định. Tuy nhiên, nếu bạn không quan tâm đến giá trị, chỉ cần sử dụng:

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}

Từ thông số kỹ thuật HTML 4, cần nhất quán trên hầu hết các trình duyệt:

http://www.w3.org/TR/html401/interact/forms.html#checkbox

Các hộp kiểm (và các nút radio) là công tắc bật / tắt có thể được bật bởi người dùng. Công tắc được "bật" khi thuộc tính đã kiểm tra của phần tử điều khiển được đặt. Khi một biểu mẫu được gửi, chỉ các điều khiển hộp kiểm "bật" có thể thành công.

Thành công được định nghĩa như sau:

Một kiểm soát thành công là "hợp lệ" để nộp. Mọi điều khiển thành công đều có tên điều khiển được ghép với giá trị hiện tại của nó như là một phần của tập dữ liệu biểu mẫu đã gửi. Điều khiển thành công phải được xác định trong phần tử FORM và phải có tên điều khiển.

kiểu nhập = "ẩn" tên = "is_main" value = "0"

kiểu nhập = "hộp kiểm" name = "is_main" value = "1"

vì vậy bạn có thể kiểm soát như thế này như tôi đã làm trong ứng dụng. nếu nó kiểm tra thì gửi giá trị 1 nếu không 0

Không có câu trả lời trên làm tôi hài lòng. Tôi tìm thấy giải pháp tốt nhất là bao gồm một đầu vào ẩn trước mỗi đầu vào hộp kiểm có cùng tên.

<input type="hidden" name="foo[]" value="off"/>

<input type="checkbox" name="foo[]"/>

Sau đó, về phía máy chủ, sử dụng một thuật toán nhỏ, bạn có thể nhận được một cái gì đó giống như HTML sẽ cung cấp.

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

Đây sẽ là đầu vào thô

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

Và chức năng sẽ trở lại

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)  

Tôi có một trang (biểu mẫu) tự động tạo hộp kiểm để những câu trả lời này rất hữu ích. Giải pháp của tôi rất giống với nhiều người ở đây nhưng tôi không thể nghĩ rằng việc thực hiện sẽ dễ dàng hơn.

Đầu tiên tôi đặt một hộp nhập ẩn phù hợp với hộp kiểm của mình, nghĩa là

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

Bây giờ nếu tất cả các checkboxeskhông được chọn thì các giá trị được trả về bởi trường ẩn sẽ bị tắt.

Ví dụ: ở đây với năm hộp kiểm được chèn động, mẫu có POSTScác giá trị sau:

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

Điều này cho thấy chỉ có hộp kiểm thứ 3 và thứ 4 là onhoặc checked.

Về bản chất, trường đầu vào giả hoặc ẩn chỉ cho biết rằng mọi thứ đều tắt trừ khi có "bật" bên dưới chỉ mục tắt, sau đó cung cấp cho bạn chỉ mục bạn cần mà không cần một dòng mã phía máy khách.

.

Giống như biến thể ASP.NET, ngoại trừ đặt đầu vào ẩn có cùng tên trước hộp kiểm thực tế (cùng tên). Chỉ các giá trị cuối cùng sẽ được gửi. Bằng cách này, nếu một hộp được chọn thì tên và giá trị "bật" của nó sẽ được gửi, trong khi nếu nó không được chọn thì tên của đầu vào ẩn tương ứng và bất kỳ giá trị nào bạn muốn cung cấp sẽ được gửi. Cuối cùng, bạn sẽ nhận được mảng $ _POST để đọc, với tất cả các yếu tố được kiểm tra và không được kiểm tra trong đó, các giá trị "bật" và "sai", không có khóa trùng lặp. Dễ dàng xử lý trong PHP.

Có cùng một vấn đề với các hộp kiểm không được kiểm tra sẽ không được gửi trên các biểu mẫu gửi, tôi đã đưa ra một giải pháp khác ngoài việc phản chiếu các mục hộp kiểm.

Bắt tất cả các hộp kiểm không được kiểm tra với

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});

Tôi đã giải quyết vấn đề với mã này:

Biểu mẫu HTML

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" >
<label for="is-business">Soy empresa</label>

và hàm javascript bằng cách thay đổi biểu mẫu giá trị hộp kiểm:

//change value of checkbox element
function changeValueCheckbox(element){
   if(element.checked){
    element.value='on';
  }else{
    element.value='off';
  }
}

và máy chủ kiểm tra xem bài đăng dữ liệu là "bật" hay "tắt". Tôi đã sử dụng java playframework

        final Map<String, String[]> data = request().body().asFormUrlEncoded();

        if (data.get("is-business")[0].equals('on')) {
            login.setType(new MasterValue(Login.BUSINESS_TYPE));
        } else {
            login.setType(new MasterValue(Login.USER_TYPE));
        }