POST अनियंत्रित HTML चेकबॉक्स


303

मुझे चेकबॉक्स का लोड मिला है जो डिफ़ॉल्ट रूप से चेक किया गया है। मेरे उपयोगकर्ता संभवत: चेकबॉक्स के कुछ (यदि कोई हैं) को अनचेक कर देंगे और शेष चेक को छोड़ देंगे।

क्या चेक पोस्टबॉक्स को बनाने का कोई तरीका है जो चेक किए गए लोगों के बजाय चेक किए गए नहीं हैं ?

जवाबों:


217

एक अलग आईडी के साथ चेकबॉक्स के लिए एक छिपा हुआ इनपुट जोड़ें:

<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 का उपयोग कर रहे हैं, तो आप जावास्क्रिप्ट निर्भरता के साथ दूर कर सकते हैं, क्योंकि केवल अंतिम मूल्य का उपयोग किया जाता है।
बेन

12
गमोव, आप गलत हैं, लेबल आईडी विशेषता के आधार पर इनपुट से जुड़े होते हैं, इनपुट नाम विशेषता से नहीं
जस्टिन एमरी

14
लेखकों पर विश्वास करना मुश्किल है कि इसे इस तरह से डिजाइन किया गया है। क्यों नहीं जाँच की गई उन लोगों के लिए कुछ डिफ़ॉल्ट मान के साथ सभी इनपुट फ़ील्ड भेजने के लिए :( यह बहुत स्पष्ट समाधान होगा तो कुछ छिपे हुए फ़ील्ड "हैक" को लागू करने के लिए। यह स्पष्ट होना चाहिए कि इसकी आवश्यकता होने वाली है और उन्हें इसकी आवश्यकता थी। अग्रिम में देखें कि।
Srneczek

34
यह बहुत हैकिंग लगता है।
EralpB

65
क्या मैं केवल एक ही हूं जो सोचता है कि checkboxतत्व का अंतर्निहित डिजाइन भयानक है? वे एक बाइनरी कंट्रोल हैं, उन्हें बाइनरी मान भेजना चाहिए।
अलेव

473

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

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

3
अब जब मैं इस प्रश्न को फिर से पढ़ता हूं तो ऐसा लगता है कि यह वास्तव में वह नहीं था जो आप चाहते थे। हालाँकि मुझे यह सवाल तब लगा जब मैं इस उत्तर का पता लगाने की कोशिश कर रहा था, तो शायद यह किसी और के लिए उपयोगी हो।
सैम

2
.NET अलग है, इसके बजाय stackoverflow.com/questions/7600817/…
KCD

121
यह ध्यान दिया जाना चाहिए कि यदि आप बॉक्स की जांच करते हैं, तो ब्राउज़र छिपे हुए और चेकबॉक्स दोनों मानों को भेज देगा। यह समाधान तब सर्वर के इन 2 मानों के साथ पोस्ट चर की हैंडलिंग पर निर्भर करता है। यदि यह केवल अंतिम मान (जैसे PHP) लेता है, तो आपका कोड अपेक्षित रूप से काम करेगा। हालांकि, कुछ सर्वर इसे अलग तरीके से संभालते हैं, कुछ पहले मूल्य को चुनते हैं, जबकि अन्य दोनों मानों को एक सूची / सरणी में रखते हैं।
माइकल एको

1
यह उत्तर इस धारणा पर निर्मित है कि आप केवल दो समान नाम के इनपुट पर रिले कर सकते हैं सर्वर पर भेजा जाएगा - मुझे समझ नहीं आता कि इसने इतने अधिक वोट क्यों प्राप्त किए हैं?
म्यूलस्किनर

7
@ एसम को नहीं पता कि आपको वह विचार कहां से मिला? जब दो या दो से अधिक नियंत्रणों को एक ही नाम दिया जाता है, तो दोनों सर्वर पर सबमिट करने के लिए भेजे जाएंगे (हालांकि, केवल चेक किए जाने पर) - वे सर्वर पर कैसे संभाले जाते हैं यह सर्वर साइड कार्यान्वयन पर निर्भर करता है। यदि आप मुझ पर विश्वास नहीं करते हैं तो आप फ़िडलर जैसे उपकरण का उपयोग करके ट्रैफ़िक की निगरानी करके अपने लिए देख सकते हैं।
मुल्सकिनर

75

मैंने इसे वेनिला जावास्क्रिप्ट का उपयोग करके हल किया:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

सावधान रहें कि इस दो इनपुट तत्वों के बीच कोई रिक्त स्थान या लाइनब्रेक न हो!

आप this.previousSibling.previousSibling"ऊपरी" तत्वों को प्राप्त करने के लिए उपयोग कर सकते हैं ।

PHP के साथ आप 0 (सेट नहीं) या 1 (सेट) के लिए नामित छिपे हुए क्षेत्र की जांच कर सकते हैं।


आपके पास दो तत्वों के बीच स्थान या रेखा विराम क्यों नहीं हो सकता है?
माइकल पॉटर

@MichaelPotter: this.prepriseSibling को व्हॉट्सऐप सिबलिंग के रूप में मिलेगा, इसलिए यह काम नहीं करता है।
मार्सेल एनिक्स

4
ओह, यह सही है! यह डुप्लिकेट नामित फ़ील्ड के साथ कई फ़ील्ड्स को पोस्ट करने की समस्या को हल करता है। कोई भी अन्य समाधान नहीं करता है। मार्सेल की विधि का उपयोग करते हुए, आपके पोस्ट किए गए फ़ील्ड में समान लंबाई सरणियाँ होंगी। तो यह परिदृश्य: <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>* मान लें कि वहाँ नई लाइनें थीं। वे मिनी-मार्कअप कोड ब्लॉक में काम नहीं करते हैं
ब्रायन लैमन

1
यह स्वीकृत उत्तर होना चाहिए। यह सरणियों के साथ काम करता है (पूर्व / नाम = "सूप []")
jdavid05

2
आप उपयोग कर सकते हैं previousElementSiblingके बजाय previousSibling। यह लगभग हर जगह समर्थित है , और यह पाठ नोड्स की उपेक्षा करता है।
मार्सॉफ्ट

23

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

यदि आप यह कोड जोड़ते हैं:

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

ब्राउज़र वास्तव में परवाह नहीं करेगा कि आप यहां क्या करते हैं। ब्राउज़र सर्वर पर दोनों मापदंडों को भेजेगा, और सर्वर को यह तय करना होगा कि उनके साथ क्या करना है।

उदाहरण के लिए PHP का उपयोग करने के लिए अंतिम मान के रूप में होता है (देखें: डुप्लिकेट HTTP GET क्वेरी कुंजियों की आधिकारिक स्थिति )

लेकिन अन्य प्रणालियों के साथ मैंने (जावा पर आधारित) के साथ काम किया है - यह चारों ओर का रास्ता है - वे आपको केवल पहला मूल्य प्रदान करते हैं। इसके बजाय। NET आपको इसके बजाय दोनों तत्वों के साथ एक सरणी देगा

मैं कभी-कभी नोड.जेएस, पायथन और पर्ल के साथ इसका परीक्षण करने की कोशिश करूंगा।


2
रूबी और नोड.जेएस दोनों किसी भी डुप्लिकेट फॉर्म फ़ील्ड का अंतिम मान लेंगे। रूबी ऑन रेल्स हेल्पर तरीके इस कारण से इस तरह से चेकबॉक्स का निर्माण करते हैं।
nzifnab

7
बस इसे राउंड करने के लिए - यह HTTP पैरामीटर प्रदूषण नामक एक हमले पर आधारित है और OWASP द्वारा विश्लेषण किया गया है: owasp.org/images/b/ba/AppsecEU09_CarettoniDiPaPa_v0.8.pdf (पृष्ठ 9) जहां आप 20 की सूची पा सकते हैं सिस्टम सिस्टम और देखते हैं कि वे कैसे संभालते हैं।
साइमनसिमिटी

1
जावा सर्वलेट्स आप सभी को देता है, जब तक आप कॉल करते हैंrequest.getParameterValues
मौहिज

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और यदि चेकबॉक्स तो असाइन जाँच 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');
        }
    })
})

1
यह समाधान छिपे हुए क्षेत्रों के साथ प्रदूषण फैलाने वाले डोम की तुलना में ठीक और अधिक सुरुचिपूर्ण काम करता है।
प्रसाद परांजपे

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
बहुत बढ़िया समाधान, लेकिन मेरे मामले में लाइव () काम नहीं करता है, इसलिए मैंने () विधि: $ ('इनपुट [प्रकार = चेकबॉक्स]) पर प्रयोग किया।) ("परिवर्तन", फ़ंक्शन () {...}) ;
मस्सा

4
LIVE अप्रचलित है। स्टैकओवरफ्लो में उत्तर पर इसका उपयोग न करें। Amem।
इस्माइल

यह जवाब वास्तव में सबसे अच्छा है .. यह उम्मीद के मुताबिक काम कर रहा है। यहां तक ​​कि समूह चेकबॉक्स के लिए भी।
अलेमोह राफेल बाजा

11

आप फॉर्म के सबमिट इवेंट में कुछ जावास्क्रिप्ट कर सकते हैं। हालांकि यह सब आप कर सकते हैं, अपने आप से ऐसा करने के लिए ब्राउज़र प्राप्त करने का कोई तरीका नहीं है। इसका मतलब यह भी है कि आपका फॉर्म बिना जावास्क्रिप्ट के उपयोगकर्ताओं के लिए टूट जाएगा। बेहतर यह है कि जो सर्वर चेकबॉक्स में है उस पर पता करें, ताकि आप यह जान सकें कि पोस्ट किए गए फॉर्म वैल्यू ( $_POSTपीएचपी में) से अनुपस्थित लोग अनियंत्रित हैं।


2
4.1 php के बाद से आप $ _REQUEST php.net/manual/en/reserved.variables.request.php
कार्ल एडलर

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

मुझे सरणी से डुप्लिकेट मान हटाने वाली पोस्ट से यह मिला है


नाम क्षेत्र मूल्य पर [] का उद्देश्य क्या है?
माइकल पॉटर

@MichaelPotter ऐसा तब है जब पोस्ट को PHP में भेजा जाता है, यह `checkbox_name []
Twister1002

@ Twister1002, मुझे लगता है कि आपने नाम विशेषता के उद्देश्य का वर्णन किया है, नाम पर [] जोड़ने का उद्देश्य नहीं। मैंने एक वेब खोज की थी और ऐसा लगता है कि कुछ लोग नामों के साथ ऐसा करते हैं: groupname [elementname] एक साथ समूह फ़ील्ड के लिए, लेकिन मुझे खाली [] के लिए स्पष्टीकरण नहीं मिला।
माइकल पॉटर

1
@MichaelPotter क्षमा करें, मुझे लगा कि मैंने वह कथन समाप्त कर दिया है। लेकिन स्पष्ट रूप से नहीं। मुझे फिर से करने दें। जब यह PHP प्रोसेसर के लिए भेजा जाता है तो यह एक सरणी के रूप में पढ़ेगा। इसलिए प्रत्येक नाम के साथ प्रत्येक checkbox_name[]मान को एक सरणी में दर्ज किया जाएगा, जिसे आप बाद में खींच सकते हैं। Ex: $_POST['checkbox_name'][0]और इसी तरह की वृद्धि के साथ कितने क्षेत्रों में एक ही नाम था। एक अन्य उदाहरण है अगर तुम नामित तीन क्षेत्रों पड़ा है field_name[]आप का दूसरा मूल्य प्राप्त कर सकते हैं field_nameकी तरह $_POST['field_name'][1]। इसका उद्देश्य अद्भुत हो सकता है यदि आपके पास कई फ़ील्ड हैं जो एक ही नाम के हैं।
ट्विस्टर 1002

8

"मैं सर्वर दृष्टिकोण के साथ चला गया हूं। ठीक काम करने के लिए लगता है - धन्यवाद। - 15:19 पर 1 दिसंबर को पहुंच '4thelasers" मैं मालिक से इसकी सिफारिश करना चाहूंगा। जैसा कि उद्धृत किया गया: जावास्क्रिप्ट समाधान इस बात पर निर्भर करता है कि सर्वर हैंडलर (मैंने इसे कैसे जांचा)

जैसे कि

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

8

मुझे पता है कि यह प्रश्न 3 साल पुराना है, लेकिन मुझे एक समाधान मिला है जो मुझे लगता है कि बहुत अच्छा काम करता है।

यदि आप $ _POST चर असाइन किया गया है और एक चर में इसे बचाने के लिए जाँच कर सकते हैं।

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

isset () फ़ंक्शन जाँचता है कि क्या $ _POST चर असाइन किया गया है। तर्क द्वारा यदि इसे असाइन नहीं किया जाता है, तो चेकबॉक्स की जाँच नहीं की जाती है।


यह बहुत बेहतर है, क्योंकि सबसे लोकप्रिय प्रतिक्रिया स्क्रीन पाठकों के लिए एक भयानक समाधान है।
केविन वाटरसन

7

यहां अधिकांश उत्तरों के लिए जावास्क्रिप्ट या डुप्लिकेट इनपुट नियंत्रणों के उपयोग की आवश्यकता होती है। कभी-कभी इसे सर्वर-साइड पर पूरी तरह से नियंत्रित करने की आवश्यकता होती है।

मेरा मानना ​​है कि इस सामान्य समस्या को हल करने के लिए (इरादा) कुंजी फॉर्म का सबमिशन इनपुट कंट्रोल है।

चेकबॉक्स के लिए अनियंत्रित मानों की व्याख्या और संभाल करने के लिए आपको निम्नलिखित का ज्ञान होना आवश्यक है:

  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 में शैलेश के विचार पर काम किया है, यह मेरे लिए काम करता है। यहाँ मेरा कोड है:

यदि मूल मौजूद है, तो '* .हेड' .हेड 'फील्ड्स' का प्रयोग करें। * /
foreach ($ _POST ['frmmain'] $ field_name => $ मूल्य के रूप में)
{
    // केवल '.hidden' के साथ समाप्त होने वाले तत्वों को देखें
    अगर (? ($ field_name, -strlen ('छिपा हुआ)))) {
        टूटना;
    }

    // 'बिना नाम के' प्राप्त करें।
    $ real_name = पदार्थ ($ key, strlen ($ field_name) - strlen ('छिपा हुआ'));

    // '.hidden' में मान के साथ एक 'नकली' मूल फ़ील्ड बनाएँ यदि कोई मूल मौजूद नहीं है
    अगर (array_key_exists ($ real_name, $ POST_copy)) {{
        $ _POST [$ real_name] = $ मूल्य;
    }

    // '.hidden' तत्व को हटाएं
    सेट नहीं ($ _ पोस्ट [$ FIELD_NAME]);
}

6

मुझे वह समाधान भी पसंद है जिसे आप सिर्फ एक अतिरिक्त इनपुट क्षेत्र में पोस्ट करते हैं, जावास्क्रिप्ट का उपयोग करने से मुझे थोड़ा हैकी लगता है।

आपके द्वारा बैकएंड का उपयोग करने पर निर्भर करता है कि कौन सा इनपुट पहले जाता है।

एक सर्वर बैकएंड के लिए जहां पहली घटना का उपयोग किया जाता है (JSP) आपको निम्नलिखित कार्य करना चाहिए।

  <input type="checkbox" value="1" name="checkbox_1"/>
  <input type="hidden" value="0" name="checkbox_1"/>


एक सर्वर बैकएंड के लिए जहां अंतिम घटना का उपयोग किया जाता है (PHP, रेल) ​​आपको निम्नलिखित कार्य करना चाहिए।

  <input type="hidden" value="0" name="checkbox_1"/>
  <input type="checkbox" value="1" name="checkbox_1"/>


एक सर्वर बैकएंड के लिए जहां सभी घटनाएं एक सूची डेटा प्रकार ( [], array) में संग्रहीत होती हैं । (पायथन / ज़ोप)

आप पोस्ट कर सकते हैं जिसमें आप कभी भी पसंद करते हैं, आपको केवल checkboxटाइप विशेषता के साथ इनपुट से मूल्य प्राप्त करने की कोशिश करने की आवश्यकता है । तो सूची का पहला इंडेक्स यदि चेकबॉक्स छिपे हुए तत्व से पहले था और आखिरी इंडेक्स अगर चेकबॉक्स छिपे हुए तत्व के बाद था।


एक सर्वर बैकएंड के लिए जहां सभी घटनाओं को अल्पविराम (ASP.NET / IIS) के साथ समाहित किया गया है, आपको सूची डेटा प्रकार बनाने के लिए सीमांकक के रूप में एक अल्पविराम का उपयोग करके स्ट्रिंग को विभाजित (विस्फोट / विस्फोट) करने की आवश्यकता होगी। ( [])

अब आप सूची के पहले इंडेक्स को हथियाने का प्रयास कर सकते हैं यदि चेकबॉक्स छिपे हुए तत्व से पहले था और आखिरी इंडेक्स को पकड़ो अगर चेकबॉक्स छिपे हुए तत्व के बाद था।

बैकेंड पैरामीटर हैंडलिंग

छवि स्रोत


6

मैं jQuery के इस ब्लॉक का उपयोग करता हूं, जो हर अनियंत्रित चेकबॉक्स में सबमिट-टाइम पर एक छिपा हुआ इनपुट जोड़ देगा। यह गारंटी देगा कि आपको हमेशा हर चेकबॉक्स के लिए एक मूल्य जमा करना होगा, हर बार, अपने मार्कअप को अव्यवस्थित किए बिना और बाद में जोड़ने वाले चेकबॉक्स पर यह करना भूल जाते हैं। यह भी जो भी बैकएंड स्टैक (PHP, रूबी, आदि) आप उपयोग कर रहे हैं अज्ञेय है।

// 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(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});

4

मैं देख रहा हूं कि यह प्रश्न पुराना है और इसके बहुत से उत्तर हैं, लेकिन मैं अपना पैसा वैसे भी दूंगा। मेरा वोट फॉर्म के 'सबमिट' ईवेंट पर जावास्क्रिप्ट समाधान के लिए है, जैसा कि कुछ ने बताया है। इनपुट्स को दोगुना नहीं करना (विशेष रूप से यदि आपके पास HTML के साथ php कोड के साथ लंबे नाम और गुण हैं), कोई सर्वर साइड परेशान नहीं है (जिसे सभी फ़ील्ड नामों को जानना होगा और उन्हें एक-एक करके जांचना होगा), बस सभी अनियंत्रित आइटम प्राप्त करें , उन्हें 0 मान असाइन करें (या जो भी आपको 'चेक नहीं' स्थिति इंगित करने के लिए आवश्यक है) और फिर उनकी विशेषता 'चेक' को सही में बदलें

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

मेरी तरफ से काम नहीं कर रहा है। ऐसा करने की कोशिश कर रहा है लेकिन अभी भी सभी चेकबॉक्स पोस्ट नहीं कर रहा है। [कोड] $ ("# फ़िल्टर इनपुट")। परिवर्तन (फ़ंक्शन (ई) {कंसोल.लॉग ('सबमिट'); var b = $ ("इनपुट: चेकबॉक्स: नहीं (चेक किया गया)"); $ (बी) .each (फ़ंक्शन () {$ (यह) .val (2); $ (यह) .attr ("चेक, ट्रू);}); $ (" # फ़िल्टर ")। सबमिट करें ();}); [/ code]
lio

मेरे लिए छल किया। एकमात्र दोष - फॉर्म सबमिट करने पर हर चेकबॉक्स चेक किया गया। यह किसी उपयोगकर्ता के लिए भ्रामक हो सकता है, लेकिन क्योंकि पृष्ठ सबमिट होने के बाद पुनः लोड हो रहा है, मुझे लगता है कि यह एक मामूली समस्या है।
ओक्साना रोमनिव

जैसा कि ओक्साना ने कहा, यह सभी चेकबॉक्सों की जांच करता है, जिसमें किसी भी आवश्यक चेकबॉक्स को शामिल किया जाता है, उपयोगकर्ता ने स्वयं का चयन नहीं किया है कि उपयोगकर्ता किसी शर्त के लिए सहमत हुए बिना फॉर्म जमा करने की अनुमति देता है।
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 का उपयोग करें। फिर चेकबॉक्स को अक्षम करने वाले बिट को हटा दें। इसके बाद यह पूरी तरह से काम करता है।
cgrouge

1
सर्वश्रेष्ठ उत्तर को प्रत्येक के लिए एक और छिपे हुए इनपुट को जोड़ने की आवश्यकता नहीं है
स्काई

3

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

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


उत्तर अच्छा है, लेकिन मैं जानना चाहता हूं कि क्या यह @Rameez SOOMRO के उत्तर से भिन्न है?
इमरान क़मर

समान अंतिम परिणाम, केवल इस तरह से आप चेक किए गए चेकबॉक्स के मूल्य को नहीं बदलते हैं।
सेबोरेरिया

2

मैं $ _POST को सम्‍मिलित करना पसंद करूंगा

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

यह मन में है, अगर POST के पास 'checkboxname'value' नहीं है, तो मान को निरुपित किया गया था, इसलिए इसे अनकॉक किया गया था।

आप अपने cckckbox मानों की एक सारणी बना सकते हैं और एक फ़ंक्शन बना सकते हैं जो यह जांचता है कि क्या मान मौजूद हैं, यदि doesn `t, यह अनियंत्रित हैं और आप मान निर्दिष्ट कर सकते हैं


1

अजाक्स क्रियाओं पर उदाहरण (': चेक किया हुआ') का प्रयोग किया गया है।

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

Params को TRUE OR FALSE में मान मिलेगा ।।


1

चेकबॉक्स आमतौर पर बाइनरी डेटा का प्रतिनिधित्व करते हैं जो डेटाबेस में Yes / No, Y / N या 1/0 मान के रूप में संग्रहीत होते हैं। HTML चेकबॉक्‍स में सर्वर को मान भेजने के लिए खराब प्रकृति होती है यदि चेकबॉक्स की जाँच हो! इसका मतलब है कि अन्य साइट पर सर्वर स्क्रिप्ट अग्रिम में पता होना चाहिए कि वेब पेज पर सभी संभावित चेकबॉक्स हैं जो सकारात्मक (चेक किए गए) या नकारात्मक (अनियंत्रित) मूल्यों को स्टोर करने में सक्षम हैं। वास्तव में केवल नकारात्मक मूल्य समस्या है (जब उपयोगकर्ता पहले (पूर्व) चेक किए गए मान को अनचेक करता है - सर्वर को यह कैसे पता चल सकता है जब कुछ भी नहीं भेजा जाता है अगर यह पहले से नहीं जानता है कि यह नाम भेजा जाना चाहिए)। यदि आपके पास एक सर्वर साइड स्क्रिप्ट है जो गतिशील रूप से UPDATE स्क्रिप्ट बनाता है तो एक समस्या है क्योंकि आपको नहीं पता है कि चेक के लिए Y मान सेट करने के लिए और अनियंत्रित (प्राप्त नहीं) वाले लोगों के लिए N मान प्राप्त करने के लिए सभी चेकबॉक्स प्राप्त करने चाहिए।

चूंकि मैं अपने डेटाबेस में 'Y' और 'N' मूल्यों को संग्रहीत करता हूं और पृष्ठ पर चेक किए गए और अनचेक किए गए चेकबॉक्स के माध्यम से उनका प्रतिनिधित्व करता हूं, इसलिए मैंने 'Y' और 'N' मूल्यों के साथ प्रत्येक मान (चेकबॉक्स) के लिए छिपे हुए फ़ील्ड को जोड़ा, फिर दृश्य के लिए चेकबॉक्स का उपयोग करें चयन के अनुसार मान का निर्धारण करने के लिए साधारण जावास्क्रिप्ट फंक्शन चेक () का उपयोग करें।

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

मेरे वेब पेज पर प्रत्येक चेकबॉक्स के लिए एक जावास्क्रिप्ट ऑनक्लिक श्रोता और कॉल फ़ंक्शन चेक () का उपयोग करें:

function check(me)
{
  if(me.checked)
  {
    me.previousSibling.previousSibling.value='Y';
  }
  else
  {
    me.previousSibling.previousSibling.value='N';
  }
}

इस तरह से 'Y' या 'N' मान हमेशा सर्वर साइड स्क्रिप्ट पर भेजे जाते हैं, यह जानता है कि वे कौन से फ़ील्ड हैं जिन्हें अपडेट किया जाना चाहिए और "y 'में" मान "पर चेकोबॉक्स के रूपांतरण की आवश्यकता नहीं है या चेकबॉक्स प्राप्त नहीं हुआ है। '।

नोट: सफ़ेद स्थान या नई लाइन भी एक सहोदर है इसलिए यहाँ मुझे आवश्यकता है। यदि बीच में कोई जगह नहीं है तो केवल .prebuSibling.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 चर में सेट नहीं है तो हम जानते हैं कि चेकबॉक्स की जाँच नहीं की गई है और मूल्य गलत हो सकता है।

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

लेकिन अगर आपने एक गतिशील रूप बनाया है, तो आपको हमेशा अपने चेकबॉक्स के नाम की विशेषता का पता नहीं चलेगा, यदि आप चेकबॉक्स का नाम नहीं जानते हैं, तो आप यह जांचने के लिए कि क्या इसे भेजा गया है, आइसेट फ़ंक्शन का उपयोग नहीं कर सकता है $ _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

बेहतर वर्कअराउंड है। सबसे पहले केवल उन चेकबॉक्स को नाम विशेषता प्रदान करें जो चेक किए गए हैं। फिर क्लिक करें submit, एक जावास्क्रिप्ट के माध्यम से 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);
                   });

लाभ: अतिरिक्त छिपे हुए बक्से बनाने और उन्हें हेरफेर करने की आवश्यकता नहीं है।


0

@cpburnz को यह सही मिला, लेकिन बहुत कोड के लिए, यहाँ एक ही विचार है जो कम कोड का उपयोग कर रहा है:

जे एस:

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

@ विष्णु के उत्तर का jQuery संस्करण।

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

यदि आप jQuery 1.5 या नीचे का उपयोग कर रहे हैं, तो .prop () के बजाय .attr () फ़ंक्शन का उपयोग करें


0

यह समाधान @ डेस वन से प्रेरित है।

यदि आपके इनपुट नाम "फॉर्म स्टाइल" में हैं, तो आप अपने 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 पकड़ सके।

एचटीएमएल

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

फॉर्म सबमिट पर चलने के लिए जावास्क्रिप्ट

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-अनुमतियाँ-मूल्य"] के रूप में पास हो जाएगी। PHP में, स्ट्रिंग को एक सरणी में डिकोड करें और आपके पास एक सहयोगी सरणी होगी जिसमें प्रत्येक पंक्ति और प्रत्येक स्थिर बॉक्स के लिए सही / गलत मान होगा। वर्तमान डेटाबेस मूल्यों के माध्यम से चलना और तुलना करना बहुत आसान है।

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