চেকবক্সগুলির একটি গ্রুপের জন্য এইচটিএমএল 5 "প্রয়োজনীয়" বৈশিষ্ট্যটি ব্যবহার করছেন?

Question

HTML5 সমর্থনকারী নতুন ব্রাউজারগুলি ব্যবহার করার সময় (ফায়ারফক্স 4 উদাহরণস্বরূপ);
এবং একটি ফর্ম ক্ষেত্রে বৈশিষ্ট্য রয়েছে required='required';
এবং ফর্ম ক্ষেত্রটি খালি / ফাঁকা;
এবং জমা বোতামটি ক্লিক করা হয়;
ব্রাউজারগুলি সনাক্ত করে যে "প্রয়োজনীয়" ক্ষেত্রটি খালি রয়েছে এবং ফর্মটি জমা দেয় না;
পরিবর্তে ব্রাউজার ব্যবহারকারীকে ক্ষেত্রের মধ্যে পাঠ্য টাইপ করতে বলছে এমন একটি ইঙ্গিত দেখায়।

এখন, একটি একক পাঠ্য ক্ষেত্রের পরিবর্তে আমার কাছে চেকবাক্সগুলির একটি গ্রুপ রয়েছে , যার মধ্যে কমপক্ষে একজনকে ব্যবহারকারী দ্বারা চেক / নির্বাচন করা উচিত।

requiredএই গ্রুপের চেকবক্সগুলিতে আমি কীভাবে HTML5 বৈশিষ্ট্যটি ব্যবহার করতে পারি ? (যেহেতু কেবলমাত্র একটিতে চেকবাক্স চেক করা দরকার, তাই আমি requiredপ্রতিটি চেকবক্সে বৈশিষ্ট্যটি রাখতে পারি না )

পুনশ্চ. আমি যদি সরল_রূপটি ব্যবহার করি তবে তা গুরুত্বপূর্ণ।

---

হালনাগাদ

গেল এইচটিএমএল 5 multipleঅ্যাট্রিবিউট এখানে সহায়ক হতে পারে? আমার প্রশ্নের অনুরূপ কিছু করার জন্য কেউ কি আগে এটি ব্যবহার করেছে?

হালনাগাদ

এটা তোলে প্রদর্শিত যে এই বৈশিষ্ট্যটি HTML5 এর বৈশিষ্ট দ্বারা সমর্থিত নয়: ইস্যু-111: কী ইনপুট @ জন্য @type = চেকবক্সটি গড় প্রয়োজন।?

(ইস্যুটির স্থিতি: ইস্যুটি কুসংস্কার ছাড়াই বন্ধ হিসাবে চিহ্নিত করা হয়েছে। ) এবং এখানে ব্যাখ্যাটি দেওয়া হচ্ছে ।

আপডেট 2

এটি একটি পুরানো প্রশ্ন, তবে স্পষ্ট করে বলতে চেয়েছিলেন যে প্রশ্নের মূল উদ্দেশ্যটি জাভাস্ক্রিপ্ট ব্যবহার না করে উপরেরটি করতে সক্ষম হবে - অর্থাৎ এটি করার জন্য একটি HTML5 পদ্ধতি ব্যবহার করা। পূর্ববর্তী ক্ষেত্রে, আমার "জাভাস্ক্রিপ্ট ছাড়াই" আরও বাজে হওয়া উচিত ছিল।

Comments

এটি একটি দুর্দান্ত প্রশ্ন এবং এটি এমন কোনও ফর্ম ইনপুটটির জন্য প্রযোজ্য যা একটি অ্যারে (পাঠ্য ইনপুট সহ) যেখানে আপনি কমপক্ষে একটি আইটেম একটি মান সহ বা চেক করতে চান (তবে কোনও নির্দিষ্ট নয়) চান। ডেমো আমি মনে করি এটি করার কোনও উপায় নাও থাকতে পারে তবে আমি আশা করি সেখানে রয়েছে। (বিটিডব্লিউ কোনও ভাষা বা কাঠামো বা গ্রন্থাগার তা বিবেচনা করে না, এটি কঠোরভাবে এইচটিএমএল 5)

— ওয়েসলি মার্চ

যে জেএসফিডাল ডেমো যুক্ত করার জন্য ধন্যবাদ। আশা করি এটি করার জন্য কিছু এইচটিএমএল 5-উপায় রয়েছে, অন্যথায় সম্ভবত জিকুয়েরি এবং একটি লুকানো ক্ষেত্র বা কিছু ব্যবহার করে কিছু সমাধান রোল আপ করতে হবে।

— জাবাবা

আপনি যদি জাভাস্ক্রিপ্টে ফিরে যেতে চান (এবং আপনি jQuery ব্যবহার করছেন), কোনও কিছুর "রোল আপ" করার দরকার নেই, অত্যন্ত প্রতিষ্ঠিত বৈধতা প্লাগইনটি ব্যবহার করুন: bassistance.de/jquery-plugins/jquery-plugin-uthorization

— ওয়েসলি মার্চ

@ ন্যাটাডেভিসোল্ডস, আমি যুক্তি দিয়ে বলব যে কিছু ইউআই-তে আইএমও ব্যবহার কার্যকর হয়, একাধিক চেকবক্স নির্বাচন করা শেষ ব্যবহারকারীর পক্ষে আরও স্বজ্ঞাত, বিশেষত যখন চেকবক্সগুলির সংখ্যা কম হয় - পরিবর্তে ক্লিক + সিলেক্ট হিসাবে যেমন হয় একাধিক নির্বাচন বাক্স।

— জাবাবা

পার্শ্ব নোট হিসাবে, আপনার পুরো প্রয়োজন নেই = 'প্রয়োজনীয়' বিট; কেবল 'প্রয়োজনীয়' লাগানোই যথেষ্ট।

— উইলিয়াম

Answer 1

দুর্ভাগ্যক্রমে এইচটিএমএল 5 এটি করার বাইরে কোনও বাইরের উপায় সরবরাহ করে না।

তবে, jQuery ব্যবহার করে, যদি চেকবক্স গ্রুপে কমপক্ষে একটি চেক উপাদান থাকে তবে আপনি সহজেই নিয়ন্ত্রণ করতে পারেন।

নিম্নলিখিত ডোম স্নিপেট বিবেচনা করুন:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

আপনি এই অভিব্যক্তিটি ব্যবহার করতে পারেন:

$('div.checkbox-group.required :checkbox:checked').length > 0

trueকমপক্ষে একটি উপাদান চেক করা থাকলে যা ফিরে আসে । তার ভিত্তিতে, আপনি আপনার বৈধতা যাচাই বাস্তবায়ন করতে পারেন।

Comments

@ ক্লিজস্টার প্রশ্নটি এটি করার HTML5 উপায় সম্পর্কে - জাভাস্ক্রিপ্টের সাথে নয় (অবশ্যই জাভাস্ক্রিপ্টে বিভিন্ন সমাধান সম্ভব)

— জবাবা

@ জাবা কিন্তু এই উত্তরটি বলছে। দুর্ভাগ্যক্রমে এইচটিএমএল 5

— ক্লাইজস্টার্স

যথেষ্ট ক্লিস্টারদের পক্ষে যথেষ্ট

— জবাবা

Answer 2

এটি একটি সহজ কৌশল। এটি হল jQuery কোড যে কোনওটি requiredযদি চেক করা হয় তবে বৈশিষ্ট্যগুলি পরিবর্তন করে এইচটিএমএল 5 বৈধতা ব্যবহার করতে পারে। নীচে আপনার এইচটিএমএল কোডটি রয়েছে (এটি নিশ্চিত করুন যে আপনি গ্রুপের সমস্ত উপাদানগুলির জন্য প্রয়োজনীয় যোগ করেছেন))

<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

নিম্নলিখিতটি হল jQuery স্ক্রিপ্ট, যা কোনওটি নির্বাচিত কিনা তা আরও বৈধতা যাচাই অক্ষম করে। নাম উপাদান ব্যবহার করে নির্বাচন করুন।

$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

এখানে ছোট গোচা: যেহেতু আপনি এইচটিএমএল 5 বৈধতা ব্যবহার করছেন তাই নিশ্চিত হয়ে নিন যে এটি কার্যকর হওয়ার আগে অর্থাৎ ফর্ম জমা দেওয়ার আগে আপনি এটি সম্পাদন করেছেন।

// but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});

Comments

জাভাস্ক্রিপ্টের মাধ্যমে এটি করা সম্ভব হওয়ার পরেও আমি জাভাস্ক্রিপ্ট ব্যবহার না করে সমাধানের সন্ধান করছিলাম।

— জাবাবা

আমি মনে করি এটি এখন পর্যন্ত সেরা উত্তর। হ্যাঁ, এটি জাভাস্ক্রিপ্ট ব্যবহার করে, তবে এটি জাভাস্ক্রিপ্ট সতর্কতা পপ আপ না করে HTML5 এর বৈধতা ব্যবহার করে। অন্যান্য উত্তরগুলি জেএস এবং একটি জেএস পপ আপ উইন্ডো ব্যবহার করে।

— ক্রুজ নুনেজ

এটা সত্যই খুব ভালো. সেই প্রথম দুটি jQuery লাইনে একটি বা অন্যটি বেছে নেওয়ার বিষয়টি নিশ্চিত করুন (দ্বিতীয়টি প্রথম বাতিল করে দেয়)। এছাড়াও বিকল্পটির নামে আপনি "বিকল্প" পরিবর্তন করেছেন তা নিশ্চিত করুন।

— অ্যালেন গিংরিচ

প্রদত্ত এটিকে HTML5 এ স্থানীয়ভাবে সমর্থিত নয়, এটি সত্যিকারের গ্রহণযোগ্য উত্তর হওয়া উচিত! আমি আমার নিজস্ব বৈধতা লাইব্রেরিটি কেবলমাত্র আমার সাইটে একক ফর্মের চেকবক্স ক্ষেত্রগুলির একটি সেটের জন্য প্রয়োগ করতে চাই না।

— জেমস উইলসন

Answer 3

আমি অনুমান করি যে এটি করার জন্য কোনও স্ট্যান্ডার্ড এইচটিএমএল 5 উপায় নেই তবে আপনি যদি jQuery লাইব্রেরি ব্যবহার করতে আপত্তি করেন না তবে আমি ওয়েবশিমগুলির " গ্রুপ-প্রয়োজনীয় " ব্যবহার করে একটি "চেকবক্স গ্রুপ" বৈধতা অর্জন করতে সক্ষম হয়েছি " বৈধতা বৈশিষ্ট্যটি :

গ্রুপ-প্রয়োজনীয় এর জন্য দস্তাবেজ বলে:

যদি কোনও চেকবাক্সে 'গ্রুপ-প্রয়োজনীয়' শ্রেণি থাকে তবে ফর্ম / নথির ভিতরে একই নামের চেকবক্সগুলির কমপক্ষে একটিতে চেক করতে হবে।

আপনি এখানে এটি কীভাবে ব্যবহার করবেন তার একটি উদাহরণ এখানে দেওয়া হয়েছে:

<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />

আমি প্রায়শই পলফিল এইচটিএমএল 5 বৈশিষ্ট্যগুলির জন্য ওয়েবশিম ব্যবহার করি তবে এটির মতো কিছু দুর্দান্ত optionচ্ছিক এক্সটেনশনও রয়েছে।

এমনকি এটি আপনাকে নিজের কাস্টম বৈধতার বিধিগুলিও লিখতে দেয়। উদাহরণস্বরূপ, আমাকে একটি চেকবক্স গ্রুপ তৈরি করা দরকার যা ইনপুটটির নামের উপর ভিত্তি করে ছিল না, তাই আমি তার জন্য আমার নিজস্ব বৈধতা নিয়ম লিখেছিলাম ...

Answer 4

এইচটিএমএল 5 কেবলমাত্র একটি / কমপক্ষে একটি চেকবক্স চেকবক্স গ্রুপে চেক করা প্রয়োজন সরাসরি সমর্থন করে না। জাভাস্ক্রিপ্ট ব্যবহার করে আমার সমাধানটি এখানে দেওয়া হয়েছে:

এইচটিএমএল

<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two

অবশ্যই JAVASCRIPT

       function deRequireCb(elClass) {
            el=document.getElementsByClassName(elClass);

            var atLeastOneChecked=false;//at least one cb is checked
            for (i=0; i<el.length; i++) {
                if (el[i].checked === true) {
                    atLeastOneChecked=true;
                }
            }

            if (atLeastOneChecked === true) {
                for (i=0; i<el.length; i++) {
                    el[i].required = false;
                }
            } else {
                for (i=0; i<el.length; i++) {
                    el[i].required = true;
                }
            }
        }

জাভাস্ক্রিপ্ট নিশ্চিত করবে কমপক্ষে একটি চেকবক্স চেক করা আছে, তারপরে পুরো চেকবক্স গ্রুপটি ডি-আবশ্যক। যদি একটি চেকবাক্স যাচাই করা হয় তা যদি চেক না হয়ে যায়, তবে তার জন্য আবার সমস্ত চেকবক্স দরকার হবে!

Comments

একটি খুব ভাল এবং পরিষ্কার সমাধান। ইচ্ছা +1 এর বেশি ভোট দিতে পারে

— সোনাল

@ সোনাল! ব্রায়ান এই সমাধানের জন্য আপনাকে ধন্যবাদ!

— নোরাহসাকাল

Answer 5

আমারও একই সমস্যা ছিল এবং আমার সমাধানটি হ'ল:

এইচটিএমএল:

<form id="processForm.php" action="post">
  <div class="input check_boxes required wish_payment_type">
    <div class="wish_payment_type">
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_1">
        <input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_2">
        <input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_3">
        <input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
      </label>

      <input id='submit' type="submit" value="Submit">
  </div>
</form>

জাতীয়:

var verifyPaymentType = function () {
  var checkboxes = $('.wish_payment_type .checkbox');
  var inputs = checkboxes.find('input');
  var first = inputs.first()[0];

  inputs.on('change', function () {
    this.setCustomValidity('');
  });

  first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}

$('#submit').click(verifyPaymentType);

https://jsfiddle.net/oywLo5z4/

Answer 6

@ চেগারাও এবং @ ব্রায়ান উডওয়ার্ডের উত্তরগুলি দ্বারা অনুপ্রাণিত হয়ে, আমি এখানে কাস্টম বৈধতা ত্রুটি বার্তা সহ জিকিউরি ব্যবহারকারীদের জন্য একসাথে টানলাম:

$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function() {
    if ($cbx_group.is(":checked")) {
        // checkboxes become unrequired as long as one is checked
        $cbx_group.prop("required", false).each(function() {
            this.setCustomValidity("");
        });
    } else {
        // require checkboxes and set custom validation error message
        $cbx_group.prop("required", true).each(function() {
            this.setCustomValidity("Please select at least one checkbox.");
        });
    }
});

মনে রাখবেন যে আমার ফর্মটিতে ডিফল্টরূপে কিছু চেকবক্স রয়েছে।

সম্ভবত আপনার মধ্যে কিছু জাভাস্ক্রিপ্ট / জ্যাকুয়েরি উইজার্ডস আরও শক্ত করে তুলতে পারে?

Answer 7

আমরা এইচটিএমএল 5 এর সাহায্যে খুব সহজেই এটি করতে পারি, কেবল কিছু jquery কোড যুক্ত করা দরকার

ডেমো

এইচটিএমএল

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

jQuery

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

Answer 8

আমি একদল চেকবাক্সগুলিতে একটি অদৃশ্য রেডিও যুক্ত করেছি। কমপক্ষে একটি বিকল্প চেক করা হয়, রেডিও এছাড়াও চেক সেট করা হয়। সমস্ত বিকল্প বাতিল হয়ে গেলে, রেডিওটিও বাতিল করতে সেট করা হয়। সুতরাং, ফর্মটি রেডিও প্রম্পট ব্যবহার করে "দয়া করে কমপক্ষে একটি বিকল্প পরীক্ষা করুন"

• আপনি ব্যবহার করতে পারবেন না display: noneকারণ রেডিওতে ফোকাস করা যায় না।
• আমি রেডিওর আকারটিকে পুরো চেকবক্সের আকারের সমান করে দিই, তাই যখন জিজ্ঞাসা করা হয় তখন এটি আরও স্পষ্ট।

এইচটিএমএল

<form>
  <div class="checkboxs-wrapper">
    <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
    <input type="checkbox" name="option[]" value="option1"/>
    <input type="checkbox" name="option[]" value="option2"/>
    <input type="checkbox" name="option[]" value="option3"/>
  </div>
  <input type="submit" value="submit"/>
</form>

জাভাস্ক্রিপ্ট

var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
    var isAtLeastOneServiceSelected = false;
    for(var i = inputs.length-1; i >= 0; --i) {
        if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
    }
    radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
    inputs[i].addEventListener('change', checkCheckboxes)
}

সিএসএস

.checkboxs-wrapper {
  position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    pointer-events: none;
    border: none;
    background: none;
}

https://jsfiddle.net/codus/q6ngpjyc/9/

Comments

এটি একটি দুর্দান্ত সমাধান। একটি যাদুমন্ত্র মত কাজ করে. যাইহোক, ফায়ারফক্সে, রেডিও বোতাম বাক্সের চারপাশে আমি একটি বড় লাল রূপরেখা পাই যখন এটি রেডিও বোতামটি ব্যবহার করে সমস্ত ফর্ম নিয়ন্ত্রণে প্রয়োজনীয় সেট করা আছে। অজানা হলে রেড না হওয়ার আউটলাইনটি স্টাইল করার কোনও উপায় আছে (যখন রেডিও বোতামটি যখন প্রয়োজন হয় তখন তা পরীক্ষা করা হয় না) ব্যতীত যখন ব্যবহারকারী হিট জমা দেয় এবং বৈধতা কার্যকর করে?

— gib65

আমরা সেট করতে পারেন radios 'এর opacity0, এবং সেট opacityযখন পেশ 1, যাতে আমরা লাল সীমারেখা প্রদর্শিত হয় থাকুক বা না থাকুক নিয়ন্ত্রণ করতে পারেন।

— কোডাস

এই সমাধান প্রতিভা !! আমার ক্ষেত্রে এটি কার্যকর হয় না যদি আমি হয় visibility: hiddenঅথবা display: noneকেবল ব্যবহারযোগ্যতাটি কিছুটা নোংরা হওয়া এড়াতে ব্যবহার করি । স্ক্রিন পাঠক এবং অন্যান্য অ্যাক্সেসযোগ্যতার সরঞ্জামগুলি সম্ভবত লুকানো রেডিও বোতামটি আবিষ্কার করবে।

— হুরাইডার

Answer 9

হাই, কেবলমাত্র চেক বাক্সের গোষ্ঠীতে অতিরিক্ত একটি পাঠ্য বাক্স ব্যবহার করুন any যে কোনও চেক বাক্সে ক্লিক করা হলে সেই পাঠ্য বাক্সে মান রেখে যায় that পাঠ্য বাক্সটি প্রয়োজনীয় এবং কেবলমাত্র পঠনযোগ্যভাবে তৈরি করুন।

Answer 10

আমি বুঝতে পারি যে এখানে অনেকগুলি সমাধান রয়েছে, তবে আমি খুঁজে পেলাম যেগুলির কোনওটিই আমার প্রতিটি প্রয়োজনের সাথে হিট হয়নি:

• কোনও কাস্টম কোডিং প্রয়োজন নেই
• কোড পৃষ্ঠা লোডে কাজ করে
• কোনও কাস্টম ক্লাসের প্রয়োজন নেই (চেকবক্স বা তাদের পিতামাতা)
• nameগিথুব ইস্যুগুলি তাদের এপিআইয়ের মাধ্যমে জমা দেওয়ার জন্য একই ভাগ করার জন্য আমার বেশ কয়েকটি চেকবক্সের তালিকা প্রয়োজন ছিল এবং নামটি label[]অনেকগুলি ফর্ম ক্ষেত্রগুলিতে (দুটি চেকবক্সের তালিকা এবং কয়েকটি নির্বাচিত এবং পাঠ্যবাক্স) সরবরাহ করার জন্য ব্যবহার করছিলাম - তবে আমি তাদের ভাগ না করেই অর্জন করতে পারতাম granted একই নাম, কিন্তু আমি চেষ্টা করার সিদ্ধান্ত নিয়েছি এবং এটি কার্যকর হয়েছে।

এর একমাত্র প্রয়োজন jQuery। আপনি কাস্টম বৈধতা ত্রুটি বার্তা যুক্ত করতে @ ইওওয়ালের দুর্দান্ত সমাধানটির সাথে এটি একত্রিত করতে পারেন।

/* required checkboxes */
(function ($) {
	$(function () {
		var $requiredCheckboxes = $("input[type='checkbox'][required]");

		/* init all checkbox lists */
		$requiredCheckboxes.each(function (i, el) {
			//this could easily be changed to suit different parent containers
			var $checkboxList = $(this).closest("div, span, p, ul, td");

			if (!$checkboxList.hasClass("requiredCheckboxList"))
				$checkboxList.addClass("requiredCheckboxList");
		});

		var $requiredCheckboxLists = $(".requiredCheckboxList");

		$requiredCheckboxLists.each(function (i, el) {
			var $checkboxList = $(this);
			$checkboxList.on("change", "input[type='checkbox']", function (e) {
				updateCheckboxesRequired($(this).parents(".requiredCheckboxList"));
			});

			updateCheckboxesRequired($checkboxList);
		});

		function updateCheckboxesRequired($checkboxList) {
			var $chk = $checkboxList.find("input[type='checkbox']").eq(0),
				cblName = $chk.attr("name"),
				cblNameAttr = "[name='" + cblName + "']",
				$checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr);

			if ($checkboxList.find(cblNameAttr + ":checked").length > 0) {
				$checkboxes.prop("required", false);
			} else {
				$checkboxes.prop("required", true);
			}
		}

	});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="post.php">
<div>
	Type of report:
</div>
<div>
	<input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required>
	<label for="chkTypeOfReportError">Error</label>

	<input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required>
	<label for="chkTypeOfReportQuestion">Question</label>

	<input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required>
	<label for="chkTypeOfReportFeatureRequest">Feature Request</label>
</div>

<div>
	Priority
</div>
<div>
	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required>
	<label for="chkPriorityHigh">High</label>


	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required>
	<label for="chkPriorityMedium">Medium</label>


	<input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required>
	<label for="chkPriorityMedium">Low</label>
</div>
<div>
	<input type="submit" />
</div>
</form>

Answer 11

এখানে জ্যাকুরি ব্যবহার করে আরও একটি সহজ কৌশল!

এইচটিএমএল

<form id="hobbieform">
        <div>
            <input type="checkbox" name="hobbies[]">Coding
            <input type="checkbox" name="hobbies[]">Gaming
            <input type="checkbox" name="hobbies[]">Driving
        </div>
</form>

JQuery

$('#hobbieform').on("submit", function (e) {
    var arr = $(this).serialize().toString();
    if(arr.indexOf("hobbies") < 0){
        e.preventDefault();
        alert("You must select at least one hobbie");
    }
});

সব কিছুই .. এটি কাজ করে কারণ যদি চেকবক্সের কোনওটি নাও নির্বাচিত হয় তবে চেকবক্স গোষ্ঠী সম্পর্কিত কোনও কিছুই (এর নাম সহ) সার্ভারে পোস্ট করা হয় না

Answer 12

চেষ্টা করুন:

self.request.get('sports_played', allow_multiple=True)

অথবা

self.request.POST.getall('sports_played')

আরো নির্দিষ্টভাবে:

আপনি যখন চেকবক্স অ্যারে থেকে ডেটা পড়ছেন তখন নিশ্চিত হয়ে নিন অ্যারেটি রয়েছে:

len>0 

এক্ষেত্রে:

len(self.request.get('array', allow_multiple=True)) > 0

Comments

আপনি কি নিজের উত্তরটি আরও কিছুটা ব্যাখ্যা করতে পারেন?

— কুড়ি

> 0 lên (allow_multiple = true) self.request.get ( 'অ্যারে'): আপনি যখন চেকবক্সটি অ্যারে থেকে ডেটা পড়া হয়, নিশ্চিত করুন অ্যারে lên হয়েছে এই ক্ষেত্রে 0 করতে>

— Gjison Giocf

উপরে আপনার মন্তব্যে তথ্য সহ আপনার প্রশ্নটি সম্পাদনা করুন এবং আমি ডাউনটাওট সরিয়ে খুশি হব।

— কুড়ি

আপনার পোস্ট সম্পাদনা করার জন্য ধন্যবাদ, তবে আরও কিছুটা সৌজন্যে যথাযথ হবে।

— বিশ

প্রশ্নের সাথে পুরোপুরি সম্পর্কহীন বলে মনে হচ্ছে। এইচটিএমএল বৈধতা সম্পর্কে জিজ্ঞাসা করছে, এবং এর সমাধানটি অজগর। প্রশ্নটি সার্ভার সাইডের বৈধতা সম্পর্কেও জিজ্ঞাসা করছে না, জিজ্ঞাসা করছে যে কমপক্ষে 1 টি পরীক্ষা করা হয়েছে কিনা তা যাচাই করার জন্য চেকবক্স গোষ্ঠীগুলিকে বৈধতা দেওয়ার উপায় আছে।

— অক্টোবায়ামু