क्या चेकबॉक्स इनपुट केवल डेटा पोस्ट करते हैं यदि वे जांचे जाते हैं?


183

क्या यह ब्राउज़र के लिए मानक व्यवहार केवल चेकबॉक्स इनपुट वैल्यू डेटा भेजने के लिए है अगर इसे फॉर्म सबमिशन पर जांचा जाता है?

और यदि कोई मूल्य डेटा नहीं दिया जाता है, तो क्या डिफ़ॉल्ट मान हमेशा "चालू" होता है?

उपरोक्त को सही मानते हुए, क्या यह सभी ब्राउज़रों के अनुरूप व्यवहार है?

जवाबों:


186

हाँ, मानक व्यवहार है मान केवल तभी भेजा जाता है जब चेकबॉक्स की जाँच की जाती है। इसका आम तौर पर मतलब है कि आपको यह याद रखने का एक तरीका होना चाहिए कि आप सर्वर की तरफ से क्या चेकबॉक्स की उम्मीद कर रहे हैं क्योंकि सभी डेटा फॉर्म से वापस नहीं आते हैं।

डिफ़ॉल्ट मान हमेशा "चालू" होता है, यह ब्राउज़रों के अनुरूप होना चाहिए।

यह W3C HTML 4 अनुशंसा में शामिल है :

चेकबॉक्स (और रेडियो बटन) स्विच / ऑन हैं जो उपयोगकर्ता द्वारा चालू किए जा सकते हैं। एक स्विच "चालू" होता है जब नियंत्रण तत्व की जाँच की विशेषता सेट की जाती है। जब कोई फ़ॉर्म सबमिट किया जाता है, तो केवल "ऑन" चेकबॉक्स नियंत्रण सफल हो सकते हैं।


18
दुर्भाग्य से यह दर्दनाक थ्रस्ट है, केवल चेक किए गए चेकबॉक्स सर्वर पर भेजे जाते हैं, अनियंत्रित नहीं। यदि आप पहले से जानते हैं कि चेकबॉक्स पृष्ठ पर क्या हैं तो उन्हें प्रबंधित करने के लिए सर्वर साइड स्क्रिप्ट पर समस्या नहीं है। समस्या यह है कि जब आप यह नहीं जानते कि अग्रिम में - गतिशील रूप से कुछ व्यावसायिक तर्क के आधार पर पृष्ठ पर चेकबॉक्स बनाए जाते हैं। फिर आपको ट्रिक्स बनाना होगा और उन चेकबॉक्स के लिए समानांतर हाईडेन इनपुट फ़ील्ड का उपयोग करना होगा और उन्हें जावास्क्रिप्ट के साथ पूरा करना होगा।
sbrbot

"की अनुमति असफल नियंत्रण (यानी प्रकार =" के साथ एक सुसंगत सत्यापनकर्ता चेकबॉक्स ") बनाने के लिए महत्वपूर्ण के रूप में इन प्रपत्र नियंत्रण नामित करने के लिए है क्षणिक जब वे सफल नहीं रहे हैं, गतिशील रूप से आपकी प्रक्षालक और सत्यापनकर्ता तदनुसार बदल देते
एंथोनी Rutledge

3
वर्कअराउंड: <select>दो विकल्पों के साथ उपयोग करें onऔर off:-)
andy

82

HTML में, प्रत्येक <input />तत्व एक एकल (लेकिन अद्वितीय नहीं) नाम और मूल्य जोड़ी के साथ जुड़ा हुआ है। यह जोड़ी बाद के अनुरोध (इस मामले में, एक POST अनुरोध निकाय) में तभी भेजी जाती है, जब <input />वह "सफल" हो।

इसलिए यदि आपके <form>डोम में ये इनपुट हैं :

<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"                     />

ये नाम + मान जोड़े उत्पन्न करेंगे जो सर्वर पर सबमिट किए जाएंगे:

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

नोटिस जो:

  • twoऔर sixउन्हें बाहर रखा गया था क्योंकि उनके पास disabledविशेषता सेट थी।
  • three दो बार भेजा गया था क्योंकि इसमें एक ही नाम के दो वैध इनपुट थे।
  • fourनहीं भेजा गया था क्योंकि यह एक checkboxऐसा नहीं थाchecked
  • sixहोने के बावजूद नहीं भेजा गया checkedक्योंकि disabledविशेषता में एक उच्च प्राथमिकता है।
  • sevenकोई name=""विशेषता नहीं भेजी गई है, इसलिए इसे सबमिट नहीं किया गया है।

आपके प्रश्न के संबंध में: आप देख सकते हैं कि एक चेकबॉक्स जिसे चेक नहीं किया गया है, इसलिए इसका नाम + मूल्य जोड़ी सर्वर पर नहीं भेजा जाएगा - लेकिन अन्य इनपुट जो उसी नाम को साझा करते हैं, इसके साथ भेजा जाएगा।

ASP.NET MVC जैसी रूपरेखाएँ इसके द्वारा (सरसरी तौर पर) प्रत्येक checkboxइनपुट को hiddenदिए गए HTML में एक इनपुट के साथ जोड़कर काम करती हैं , जैसे:

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

प्रस्तुत करता है:

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

यदि उपयोगकर्ता चेकबॉक्स की जांच नहीं करता है, तो निम्नलिखित सर्वर पर भेजा जाएगा:

SomeBooleanProperty=false

यदि उपयोगकर्ता चेकबॉक्स की जांच करता है, तो दोनों को भेजा जाएगा:

SomeBooleanProperty=true
SomeBooleanProperty=false

लेकिन सर्वर =falseसंस्करण को नजरअंदाज कर देगा क्योंकि यह संस्करण को देखता है =true, और इसलिए यदि यह नहीं दिखता है तो =trueयह निर्धारित कर सकता है कि चेकबॉक्स प्रदान किया गया था और उपयोगकर्ता ने इसे चेक नहीं किया था - SomeBooleanPropertyइनपुट के विपरीत बिल्कुल भी प्रस्तुत नहीं किया जा रहा है।


ध्यान देने योग्य बात यह है कि यदि आपके पास कई फ़ील्ड हैं, जैसे कि अतिरिक्त छिपे हुए टेक्स्टबॉक्स के साथ, तो बैकएंड को एक मान प्राप्त होगा।
सलामी

यह केवल एक सरणी प्राप्त करता है यदि आप []इनपुट नाम के अंत में उपयोग करते हैं , तो डिफ़ॉल्ट व्यवहार केवल अंतिम तत्व को उस नाम के साथ सबमिट करना है, इसलिए जब तक छिपा इनपुट चेकबॉक्स से पहले है, तब तक यह काम करेगा।
beeglebug

एक ही नाम (छिपे हुए फ़ील्ड + चेकबॉक्स फ़ील्ड) के साथ दो फ़ील्ड होने और चेकबॉक्स की जाँच करने से, पोस्ट मान मानों का एक अल्पविराम से अलग स्ट्रिंग है। "0,1" जैसा कुछ
बजे

1
@beeglebug जो आप बता रहे हैं कि PHP कैसे नामों और मूल्यों को संभालती है, []प्रत्यय HTML विनिर्देशन का हिस्सा नहीं है और ब्राउज़र विशेष रूप से इसका इलाज नहीं करते हैं। []PHP के बिना सभी मानों के बजाय केवल एकल मान (अंतिम मान) तक पहुंच की अनुमति देगा।
दाई

1
चेकबॉक्स से पहले छिपी हुई संपत्ति का उपयोग करना मेरे लिए उन सभी ब्राउज़रों में काम कर रहा है जिन्हें मैंने PHP के साथ GET और POST का उपयोग करके देखा है। जब मैंने इसे चेकबॉक्स नियंत्रण के बाद रखा तो इसने हमेशा परिणाम को गलत बताया।
एड्रियनवाडे सेप

16

अगर चेकबॉक्स की जाँच नहीं की जाती है, तो यह फॉर्म सबमिशन पर भेजे गए डेटा में योगदान नहीं करता है।

HTML5 अनुभाग 4.10.22.4 फॉर्म डेटा सेट का निर्माण जिस तरह से डेटा का निर्माण किया जाता है, उसका वर्णन करता है:

यदि निम्न में से कोई भी स्थिति पूरी होती है, तो इस तत्व के लिए इन सबस्टेप्स को छोड़ दें: […]

फ़ील्ड तत्व एक इनपुट तत्व है जिसका प्रकार विशेषता चेकबॉक्स स्थिति में है और जिसकी जाँच झूठी है।

और उसके बाद डिफ़ॉल्ट onको निर्दिष्ट किया जाता है यदि valueगायब है:

अन्यथा, यदि फ़ील्ड तत्व एक इनपुट तत्व है, जिसका प्रकार चेकबॉक्स स्थिति या रेडियो बटन स्थिति में है, तो इन अतिरिक्त नेस्टेड अपग्रेड्स को चलाएं:

यदि फ़ील्ड तत्व में कोई मान विशेषता निर्दिष्ट है, तो मान उस विशेषता का मान होने दें; अन्यथा, मान को "पर" स्ट्रिंग होने दें।

इस प्रकार फार्म डेटा निर्माण के दौरान अनियंत्रित चेकबॉक्स को छोड़ दिया जाता है।

HTML4 के तहत समान व्यवहार आवश्यक है । सभी अनुरूप ब्राउज़रों से इस व्यवहार की अपेक्षा करना उचित है।


10

चेकबॉक्स चेक और चेक किए जाने पर ही 'और' पर मान पोस्ट कर रहे हैं। चेकबॉक्स मान को पकड़ने के लिए आप छिपे हुए इनपुट का उपयोग कर सकते हैं

जेएस :

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" />

8

क्या यह ब्राउज़र के लिए मानक व्यवहार केवल चेकबॉक्स इनपुट वैल्यू डेटा भेजने के लिए है अगर इसे फॉर्म सबमिशन पर जांचा जाता है?

हां, क्योंकि अन्यथा यह निर्धारित करने का कोई ठोस तरीका नहीं होगा कि क्या चेकबॉक्स वास्तव में चेक किया गया था या नहीं (यदि यह मान बदल गया है, तो मामला तब मौजूद हो सकता है जब आपके वांछित मूल्य की जांच की गई हो, यह उसी के समान होगा अदला बदली)।

और यदि कोई मूल्य डेटा नहीं दिया जाता है, तो क्या डिफ़ॉल्ट मान हमेशा "चालू" होता है?

अन्य उत्तर पुष्टि करते हैं कि "चालू" डिफ़ॉल्ट है। हालांकि, यदि आप मूल्य में रुचि नहीं रखते हैं, तो बस उपयोग करें:

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

7

HTML 4 युक्ति से, जो लगभग सभी ब्राउज़रों के अनुरूप होनी चाहिए:

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

चेकबॉक्स (और रेडियो बटन) स्विच / ऑन हैं जो उपयोगकर्ता द्वारा चालू किए जा सकते हैं। एक स्विच "चालू" होता है जब नियंत्रण तत्व की जाँच की विशेषता सेट की जाती है। जब कोई फ़ॉर्म सबमिट किया जाता है, तो केवल "ऑन" चेकबॉक्स नियंत्रण सफल हो सकते हैं।

सफल को इस प्रकार परिभाषित किया गया है:

प्रस्तुत करने के लिए एक सफल नियंत्रण "वैध" है। प्रत्येक सफल नियंत्रण में इसका नियंत्रण नाम प्रस्तुत प्रपत्र डेटा सेट के भाग के रूप में अपने वर्तमान मूल्य के साथ रखा गया है। एक सफल नियंत्रण को एक FORM तत्व के भीतर परिभाषित किया जाना चाहिए और एक नियंत्रण नाम होना चाहिए।


5

इनपुट प्रकार = "छिपा हुआ" नाम = "is_main" मान = "0"

इनपुट प्रकार = "चेकबॉक्स" नाम = "is_main" मूल्य = "1"

तो आप इस तरह से नियंत्रित कर सकते हैं जैसे मैंने आवेदन में किया था। यदि यह जाँच करता है तो मान 1 भेजें अन्यथा 0


3

उपरोक्त उत्तर में से किसी ने भी मुझे संतुष्ट नहीं किया। मैंने पाया कि एक ही नाम के साथ प्रत्येक चेकबॉक्स इनपुट से पहले एक छिपे हुए इनपुट को शामिल करने के लिए सबसे अच्छा समाधान है ।

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

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

फिर सर्वर की तरफ, थोड़ा एल्गोरिथ्म का उपयोग करके आप कुछ और प्राप्त कर सकते हैं जैसे HTML प्रदान करना चाहिए।

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

यह कच्चा इनपुट होगा

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

और फ़ंक्शन वापस आ जाएगा

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

1

मेरे पास एक पृष्ठ (रूप) है जो गतिशील रूप से चेकबॉक्स उत्पन्न करता है इसलिए इन उत्तरों से बहुत मदद मिली है। मेरा समाधान यहां बहुत से समान है, लेकिन मैं यह सोचने में मदद नहीं कर सकता कि इसे लागू करना आसान है।

पहले मैंने अपने चेकबॉक्स के अनुरूप एक छिपा हुआ इनपुट बॉक्स रखा, यानी

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

अब यदि सभी checkboxesअन-चयनित हैं तो छिपे हुए क्षेत्र द्वारा लौटाए गए मान सभी बंद हो जाएंगे।

उदाहरण के लिए, यहां पांच डायनामिक रूप से डाले गए चेकबॉक्स हैं, POSTSनिम्न मानों को बनाते हैं:

  '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)

इससे पता चलता है कि केवल 3 और 4 चेक बॉक्स हैं onया checked

संक्षेप में डमी या छिपे हुए इनपुट फ़ील्ड से संकेत मिलता है कि सब कुछ बंद है, जब तक कि ऑफ इंडेक्स के नीचे "ऑन" न हो , जो तब आपको इंडेक्स देता है जो आपको क्लाइंट साइड कोड की एक भी लाइन के बिना चाहिए।


0

ASP.NET संस्करण की तरह, वास्तविक चेकबॉक्स (उसी नाम का) से पहले एक ही नाम के साथ छिपे हुए इनपुट को छोड़कर। केवल अंतिम मान भेजे जाएंगे। इस तरह यदि किसी बॉक्स को चेक किया जाता है तो उसका नाम और मूल्य "चालू" भेजा जाता है, जबकि यदि यह अनियंत्रित है तो संबंधित छिपे हुए इनपुट का नाम और जो भी मूल्य आप इसे देना चाहते हैं वह भेजा जाएगा। अंत में, आपको पढ़ने के लिए $ _POST सरणी मिलेगी, जिसमें सभी चेक किए गए और अनियंत्रित तत्व हैं, "ऑन" और "गलत" मान, कोई डुप्लिकेट कुंजी नहीं। PHP में प्रोसेस करना आसान है।


0

अनियंत्रित चेकबॉक्स के साथ एक ही समस्या है कि फॉर्म सबमिट पर नहीं भेजे जाएंगे, मैं चेकबॉक्स आइटमों की तुलना में दर्पण के अलावा एक अन्य समाधान के साथ आया था।

के साथ सभी अनियंत्रित चेकबॉक्स प्राप्त करना

var checkboxQueryString;

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

-2

मैंने इस कोड के साथ समस्या का समाधान किया:

HTML फॉर्म

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

और चेकबॉक्स मान फ़ॉर्म को बदलकर जावास्क्रिप्ट फ़ंक्शन:

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

और यदि डेटा पोस्ट "चालू" या "बंद" है तो सर्वर ने जाँच की। मैंने प्लेफ्रामवर्क जावा का इस्तेमाल किया

        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));
        }
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.