এইচটিএমএল একটি গ্রুপে শুধুমাত্র একটি চেকবক্স নির্বাচন করুন


125

সুতরাং আমি কীভাবে কোনও ব্যবহারকারীকে কেবল একটি মাত্র চেকবক্স নির্বাচন করতে দেব?

আমি জানি রেডিও বোতামগুলি "আদর্শ" তবে আমার উদ্দেশ্যে ... এটি হয় না।

আমার একটি ক্ষেত্র রয়েছে যেখানে ব্যবহারকারীদের দুটি বা দুটি বিকল্প বেছে নিতে হবে তবে উভয়ই নয়। সমস্যাটি হ'ল আমার ব্যবহারকারীদেরও তাদের অপশনটি নির্বাচন করতে সক্ষম হতে হবে এবং রেডিও বোতামগুলি ব্যর্থ হয় কারণ আপনি একবার গ্রুপটি নির্বাচন করলে আপনাকে একটি বিকল্প চয়ন করতে হবে।

আমি পিএইচপি এর মাধ্যমে তথ্যটি যাচাই করব, তবে ব্যবহারকারীরা যদি এটি দিতে চান তবে আমি একটি উত্তর সীমাবদ্ধ রাখতে চাই।


1
শুধুমাত্র এইচটিএমএল দিয়ে, এটি করা যায় না। আপনার জাভাস্ক্রিপ্ট দরকার হবে। আপনি যদি jQuery এর জন্য উন্মুক্ত হন, আমি আপনাকে একটি দ্রুত সমাধান দিতে পারি।
পরাবাস্তব স্বপ্নগুলি

12
"কিছুই নয়" লেবেলযুক্ত একটি অতিরিক্ত রেডিও বোতাম সম্পর্কে কী?
ফিলিপলস

2
তৃতীয় বিকল্পটি আমার ডিজাইনের সাথে ভাল যায় না ... যদিও ভাল বিকল্প :)
ব্যবহারকারীর 246২৪৪

2
একক পছন্দযুক্ত চেকবক্সটি আসলে একটি রেডিও-বোতাম। এই আশ্চর্য ব্যবহারকারীরা কি করবেন না?
গেরম্যান

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

উত্তর:


179

এই স্নিপেটটি করবে:

  • রেডিও বোতামগুলির মতো গোষ্ঠীকরণের অনুমতি দিন
  • রেডিওর মতো কাজ করুন
  • সমস্ত নির্বাচন না করার অনুমতি দিন

// the selector will match all input controls of type :checkbox
// and attach a click event handler 
$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div>
  <h3>Fruits</h3>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label>
</div>
<div>
  <h3>Animals</h3>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label>
</div>


3
সঠিক ব্যবহার $ ব্যবহার করতে হবে (এই) .is ( ": চেক করা") যদি চেকবক্সটি চেক ইন করা হয়েছিল চেক করতে "হয়" তাহলে {...} অন্য {...} এখানে ... jsfiddle .net / zGEaa / 31
সার্জিওযাদ

2
লক্ষ্য করুন .attr আর কাজ করছে, .prop ব্যবহার করুন ( "চেক") পরিবর্তে jQuery এর নতুন সংস্করণের জন্য
user871784

@ ব্যবহারকারী 87১178484৪ - মাথা উঁচু করার জন্য ধন্যবাদ ... আমি ফিডল আপডেট করেছি!
বিপ্রতিক

3
: $ ( "Checkbox.radio ইনপুট:") আপনার রেডিও নির্বাচক মিস
সেভেন

@ সোভেন - এই উদাহরণে এটি একটি অত্যধিক নির্দিষ্ট নির্বাচক হবে। এই কথাটি বলার পরে যে পৃষ্ঠাতে যদি এমন চেকবাক্সগুলির আরও একটি সেট থাকে যা এই আচরণ করা উচিত নয়, তবে .radioনির্বাচকটি ব্যবহার করতে সহায়তা করবে। এটি
দেখানোর

101

আপনি কোনও change()হ্যান্ডলারের সাথে বাঁধাই করতে চান যাতে চেকবক্সের অবস্থার পরিবর্তন হলে ইভেন্টটি চালিত হয়। তারপরে, হ্যান্ডলারটি ট্রিগার করে এমনটি থেকে আলাদা করে সমস্ত চেকবক্স নির্বাচন করুন:

$('input[type="checkbox"]').on('change', function() {
   $('input[type="checkbox"]').not(this).prop('checked', false);
});

এখানে একটি ঝাঁকুনি


দলবদ্ধকরণের ক্ষেত্রে, যদি আপনার চেকবাক্স "গোষ্ঠী" সমস্ত ভাইবোন ছিল:

<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>  
<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>   
<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

আপনি এটি করতে পারেন:

$('input[type="checkbox"]').on('change', function() {
   $(this).siblings('input[type="checkbox"]').prop('checked', false);
});

এখানে আরেকটি মজার শব্দ


যদি আপনার চেকবাক্সগুলিকে অন্য কোনও বৈশিষ্ট্য দ্বারা গোষ্ঠীযুক্ত করা হয়, যেমন name:

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

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

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

আপনি এটি করতে পারেন:

$('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

এখানে আরেকটি মজার শব্দ


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

আমি সত্যিই এটি পছন্দ করি, আমার প্রয়োজনের জন্য আমি সামান্য একটি টুইট করতে পারি। আমার দুটি আইটেম রয়েছে তাই প্রথম আইটেমটি ডিফল্টরূপে চেক করা হয় এবং যদি এটিটি পরীক্ষা না করা হয় তবে দ্বিতীয় আইটেমটি চেক হয়ে যায়। এটি আমাকে শুরু করতে সহায়তা করেছে।
john.weland 15

হাই @ john.weland - আপনি ভালো মানে কিছু এই ?
বিলিকানান

@ বিলেকোনান প্রায় ঠিক কিন্তু একটি প্রদত্ত গ্রুপিংকে লক্ষ্য করার দক্ষতার সাথে। এটি পছন্দ । ধন্যবাদ
john.weland 22

2
সরলতার জন্য প্লাস ওয়ান
চাদ

26

রেডিও বোতামগুলি আদর্শ। আপনার কেবলমাত্র একটি তৃতীয় "নয়" বিকল্পের প্রয়োজন যা ডিফল্টরূপে নির্বাচন করা হয়।


1
এটি একটি ভাল সমাধান, তবে আমি বরং চেকবক্সগুলিতে আটকে থাকি কারণ আমার ডিজাইনটি তৃতীয় বিকল্পের জন্য আদর্শ নয়।
user962449

6
আমি দৃ strongly়ভাবে নকশা পরিবর্তন করার পরামর্শ দিচ্ছি। এই 2 টি বিকল্পের মধ্যে 0 বা 1 টিক চিহ্ন কোনও সাধারণ প্যাটার্ন নয় এবং ব্যবহারকারীদের কাছে এই 3 টি বিকল্পের 1 টিক
কোয়ান্টিন

4
আমি কেন আমার 2 টি চেকবক্সের নকশা পরিবর্তন করব?
user962449

9
যদি এই ধরনের পরিবর্তনের জন্য আপনাকে "আপনার পুরো নকশা" পরিবর্তন করতে হবে তবে এটি পরামর্শ দেয় যে নকশা প্রথম স্থানে অনেক জটিল।
কোয়ান্টিন

10
এটি জটিল নয়, এটি ঠিক ঠিক দেখাচ্ছে না ... এটি ফর্ম এবং এই জাতীয় অ্যাপ্লিকেশনগুলিতে সূক্ষ্ম দেখাতে পারে তবে আমাদের চেকবক্সগুলিতে আমাদের আলাদা ব্যবহার রয়েছে।
user962449

13

খাঁটি জেএসের উপর ভিত্তি করে এর ইতিমধ্যে কয়েকটি উত্তর রয়েছে তবে সেগুলির কোনওটিই আমি ঠিক তেমন সংক্ষিপ্ত নয় I

এখানে নাম ট্যাগ (রেডিও বোতামগুলির মতো) এবং জাভাস্ক্রিপ্টের কয়েকটি লাইন ব্যবহারের ভিত্তিতে আমার সমাধানটি দেওয়া আছে।

function onlyOne(checkbox) {
    var checkboxes = document.getElementsByName('check')
    checkboxes.forEach((item) => {
        if (item !== checkbox) item.checked = false
    })
}
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">


আপনাকে ধন্যবাদ, এটি আমার জন্য অন্য সকলের কাছ থেকে এটি করেছে =)
কেয়া

6
$("#myform input:checkbox").change(function() {
    $("#myform input:checkbox").attr("checked", false);
    $(this).attr("checked", true);
});

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


হ্যাঁ স্যার :) এটি ঠিক আছে, আমি এমন কিছু খুঁজে পেয়েছি যা আমার পক্ষে কাজ করে, যদিও আপনার সমাধানটি বেশ সহজ দেখাচ্ছে। আমি সম্ভবত আমার শেষের দিকে কিছু ভুল করেছি। যাইহোক, ধন্যবাদ.
user962449

5

এখানে আমি পছন্দ করি একটি সাধারণ এইচটিএমএল এবং জাভাস্ক্রিপ্ট সমাধান:

// জেএস একবারে কেবলমাত্র এক সপ্তাহের দিনের চেকবক্সের পরীক্ষা করার অনুমতি দেয়:

function checkOnlyOne(b){

var x = document.getElementsByClassName('daychecks');
var i;

for (i = 0; i < x.length; i++) {
  if(x[i].value != b) x[i].checked = false;
}
}


Day of the week:
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Monday" />Mon&nbsp;&nbsp;&nbsp;
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Tuesday" />Tue&nbsp;&nbsp;&nbsp;
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Wednesday" />Wed&nbsp;&nbsp;&nbsp;
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Thursday" />Thu&nbsp;&nbsp;&nbsp;
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Friday" />Fri&nbsp;&nbsp;&nbsp;
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Saturday" />Sat&nbsp;&nbsp;&nbsp;
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Sunday" />Sun&nbsp;&nbsp;&nbsp;<br /><br />

4

এই কোড আপনাকে সাহায্য করতে পারে।

$(document).ready(function(){
$('.slectOne').on('change', function() {
   $('.slectOne').not(this).prop('checked', false);
   $('#result').html($(this).data( "id" ));
   if($(this).is(":checked"))
   	$('#result').html($(this).data( "id" ));
   else
   	$('#result').html('Empty...!');
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>
<input type="checkbox" class="slectOne" data-id="1 selected"/>
<input type="checkbox" class="slectOne" data-id="2 selected"/>
<input type="checkbox" class="slectOne" data-id="3 selected"/>
<input type="checkbox" class="slectOne" data-id="4 selected"/>
<input type="checkbox" class="slectOne" data-id="5 selected"/>
<input type="checkbox" class="slectOne" data-id="6 selected"/>
<input type="checkbox" class="slectOne" data-id="7 selected"/>
<input type="checkbox" class="slectOne" data-id="8 selected"/>
<input type="checkbox" class="slectOne" data-id="9 selected"/>
<input type="checkbox" class="slectOne" data-id="10 selected"/>
<span id="result"></span>
</body>
</html>

কাজের লিঙ্ক এখানে ক্লিক করুন


3

আপ নির্মাণের billyonecan এর উত্তর, আপনাকে নিম্নলিখিত কোড যদি আপনি একাধিক চেকবক্স যে স্নিপেট হবে (অভিমানী তারা বিভিন্ন নাম আছে) ব্যবহার করতে পারেন।

    $('input.one').on('change', function() {
        var name = $(this).attr('name');
        $('input[name='+name+'].one').not(this).prop('checked', false);
    }); 

3

জেএস সম্ভবত সম্ভবত যাওয়ার উপায়, এটি কেবল এইচটিএমএল এবং সিএসএস দিয়েই করা যেতে পারে।

এখানে আপনার কাছে একটি জাল রেডিও বোতাম রয়েছে যা সত্যই লুকানো রেডিও বোতামের জন্য একটি লেবেল। এটি করে আপনি আপনার প্রয়োজনীয় প্রভাবটি পেতে পারেন।

<style>
   #uncheck>input { display: none }
   input:checked + label { display: none }
   input:not(:checked) + label + label{ display: none } 
</style>

<div id='uncheck'>
  <input type="radio" name='food' id="box1" /> 
  Pizza 
    <label for='box1'>&#9678;</label> 
    <label for='box0'>&#9673;</label>
  <input type="radio" name='food' id="box2" /> 
  Ice cream 
    <label for='box2'>&#9678;</label> 
    <label for='box0'>&#9673;</label>
  <input type="radio" name='food' id="box0" checked />
</div>

এটি এখানে দেখুন: https://jsfiddle.net/tn70yxL8/2/

এখন, এটি ধরে নিয়েছে যে আপনার অ-বাছাইযোগ্য লেবেলগুলির প্রয়োজন।

আপনি যদি লেবেলগুলি অন্তর্ভুক্ত করতে ইচ্ছুক থাকেন তবে আপনি প্রযুক্তিগতভাবে CSS এ পাঠ্য পরিবর্তন করে "আনচেক" লেবেলটি পুনরাবৃত্তি করতে এড়াতে পারেন, এখানে দেখুন: https://jsfiddle.net/7tdb6quy/2/


1

AngularJs সহ উদাহরণ

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module('app', []).controller('appc', ['$scope',
      function($scope) {
        $scope.selected = 'other';
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
  </div>



</body>

</html>


1

সরল পুরানো জাভাস্ক্রিপ্ট সহ।

<html>
<head>
</head>
<body>
<input type="checkbox" name="group1[]" id="groupname1" onClick="toggle(1,'groupname')"/>
<input type="checkbox" name="group1[]" id="groupname2" onClick="toggle(2,'groupname')"  />
<input type="checkbox" name="group1[]" id="groupname3" onClick="toggle(3,'groupname')" />

<input type="checkbox" name="group2[]" id="diffGroupname1" onClick="toggle(1,'diffGroupname')"/>
<input type="checkbox" name="group2[]" id="diffGroupname2" onClick="toggle(2,'diffGroupname')"  />
<input type="checkbox" name="group2[]" id="diffGroupname3" onClick="toggle(3,'diffGroupname')" />
<script>
function toggle(which,group){
var counter=1;
var checkbox=document.getElementById(group+counter);
while(checkbox){
if(counter==which){

}else{
checkbox.checked=false;
}
counter++;
checkbox=document.getElementById(group+counter);
}
}
</script>
</body>
</html>

0

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module('app', []).controller('appc', ['$scope',
      function($scope) {
        $scope.selected = 'male';
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
  </div>
</body>
</html>


0

বাহ্যিক জাভাস্ক্রিপ্ট লাইব্রেরি ছাড়া কারও যদি সমাধানের প্রয়োজন হয় তবে আপনি এই উদাহরণটি ব্যবহার করতে পারেন। ০.১ মানকে অনুমতি দেয় এমন একটি গ্রুপ চেকবক্স। আপনি চেকবক্স উপাদান বা সম্পর্কিত লেবেল পাঠ্যে ক্লিক করতে পারেন।

    <input id="mygroup1" name="mygroup" type="checkbox" value="1" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup1">Yes</label>
    <input id="mygroup0" name="mygroup" type="checkbox" value="0" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup0">No</label>

- - - - - - - - 

    function toggleRadioCheckbox(sender) {
        // RadioCheckbox: 0..1 enabled in a group 
        if (!sender.checked) return;
        var fields = document.getElementsByName(sender.name);
        for(var idx=0; idx<fields.length; idx++) {
            var field = fields[idx];
            if (field.checked && field!=sender)
                field.checked=false;
        }
    }

0

আমার সংস্করণ: ডেটা অ্যাট্রিবিউট এবং ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করুন

<div class="test-checkbox">
    Group One: <label>
        <input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Eat" />Eat</label>
    <label>
        <input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Sleep" />Sleep</label>
    <label>
        <input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Play" />Play</label>
    <br />
    Group Two: <label>
        <input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Fat" />Fat</label>
    <label>
        <input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Comfort" />Comfort</label>
    <label>
        <input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Happy" />Happy</label>
</div>
<script>
    let cbxes = document.querySelectorAll('input[type="checkbox"][data-limit="only-one-in-a-group"]');
    [...cbxes].forEach((cbx) => {
        cbx.addEventListener('change', (e) => {
            if (e.target.checked)
                uncheckOthers(e.target);
        });
    });
    function uncheckOthers (clicked) {
        let name = clicked.getAttribute('name');
        // find others in same group, uncheck them
        [...cbxes].forEach((other) => {
            if (other != clicked && other.getAttribute('name') == name)
                other.checked = false;
        });
    }
</script>

-1

Necromancing:
এবং jQuery ছাড়াই , এই জাতীয় চেকবক্স কাঠামোর জন্য:

<label>
<input type="checkbox" id="mytrackers_1" name="blubb_1" value="">--- Bitte ausw&#228;hlen ---
</label>
<label>
<input type="checkbox" id="mytrackers_2" name="blubb_2" value="7">Testtracker
</label>
<label>
<input type="checkbox" id="mytrackers_3" name="blubb_3" value="3">Kundenanfrage
</label>
<label>
<input type="checkbox" id="mytrackers_4" name="blubb_4" value="2">Anpassung
</label>
<label>
<input type="checkbox" id="mytrackers_5" name="blubb_5" value="1" checked="checked" >Fehler
</label>
<label>
<input type="checkbox" id="mytrackers_6" name="blubb_6" value="4">Bedienung
</label>
<label>
<input type="checkbox" id="mytrackers_7" name="blubb_7" value="5">Internes
</label>
<label>
<input type="checkbox" id="mytrackers_8" name="blubb_8" value="6">&#196;nderungswunsch
</label>

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

    /// attach an event handler, now or in the future, 
    /// for all elements which match childselector,
    /// within the child tree of the element maching parentSelector.
    function subscribeEvent(parentSelector, eventName, childSelector, eventCallback) {
        if (parentSelector == null)
            throw new ReferenceError("Parameter parentSelector is NULL");
        if (childSelector == null)
            throw new ReferenceError("Parameter childSelector is NULL");
        // nodeToObserve: the node that will be observed for mutations
        var nodeToObserve = parentSelector;
        if (typeof (parentSelector) === 'string')
            nodeToObserve = document.querySelector(parentSelector);
        var eligibleChildren = nodeToObserve.querySelectorAll(childSelector);
        for (var i = 0; i < eligibleChildren.length; ++i) {
            eligibleChildren[i].addEventListener(eventName, eventCallback, false);
        } // Next i 
        // /programming/2712136/how-do-i-make-this-loop-all-children-recursively
        function allDescendants(node) {
            if (node == null)
                return;
            for (var i = 0; i < node.childNodes.length; i++) {
                var child = node.childNodes[i];
                allDescendants(child);
            } // Next i 
            // IE 11 Polyfill 
            if (!Element.prototype.matches)
                Element.prototype.matches = Element.prototype.msMatchesSelector;
            if (node.matches) {
                if (node.matches(childSelector)) {
                    // console.log("match");
                    node.addEventListener(eventName, eventCallback, false);
                } // End if ((<Element>node).matches(childSelector))
                // else console.log("no match");
            } // End if ((<Element>node).matches) 
            // else console.log("no matchfunction");
        } // End Function allDescendants 
        // Callback function to execute when mutations are observed
        var callback = function (mutationsList, observer) {
            for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
                var mutation = mutationsList_1[_i];
                // console.log("mutation.type", mutation.type);
                // console.log("mutation", mutation);
                if (mutation.type == 'childList') {
                    for (var i = 0; i < mutation.addedNodes.length; ++i) {
                        var thisNode = mutation.addedNodes[i];
                        allDescendants(thisNode);
                    } // Next i 
                } // End if (mutation.type == 'childList') 
                // else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.');
            } // Next mutation 
        }; // End Function callback 
        // Options for the observer (which mutations to observe)
        var config = { attributes: false, childList: true, subtree: true };
        // Create an observer instance linked to the callback function
        var observer = new MutationObserver(callback);
        // Start observing the target node for configured mutations
        observer.observe(nodeToObserve, config);
    } // End Function subscribeEvent 


    function radioCheckbox_onClick() 
    { 
        // console.log("click", this);
        let box = this;
        if (box.checked) 
        {
            let name = box.getAttribute("name");
            let pos = name.lastIndexOf("_");
            if (pos !== -1) name = name.substr(0, pos);

            let group = 'input[type="checkbox"][name^="' + name + '"]';
            // console.log(group);
            let eles = document.querySelectorAll(group);
            // console.log(eles);
            for (let j = 0; j < eles.length; ++j) 
            {
                eles[j].checked = false;
            }
            box.checked = true;
        }
        else
            box.checked = false;
    }


    // /programming/9709209/html-select-only-one-checkbox-in-a-group
    function radioCheckbox()
    { 
        // on instead of document...
        let elements = document.querySelectorAll('input[type="checkbox"]')

        for (let i = 0; i < elements.length; ++i)
        {
            // console.log(elements[i]);
            elements[i].addEventListener("click", radioCheckbox_onClick, false);

        } // Next i 

    } // End Function radioCheckbox 


    function onDomReady()
    {
        console.log("dom ready");
        subscribeEvent(document, "click", 
            'input[type="checkbox"]', 
            radioCheckbox_onClick
        ); 

        // radioCheckbox();
    }

    if (document.addEventListener) document.addEventListener("DOMContentLoaded", onDomReady, false);
    else if (document.attachEvent) document.attachEvent("onreadystatechange", onDomReady);
    else window.onload = onDomReady;

    function onPageLoaded() {
        console.log("page loaded");
    }

    if (window.addEventListener) window.addEventListener("load", onPageLoaded, false);
    else if (window.attachEvent) window.attachEvent("onload", onPageLoaded);
    else window.onload = onPageLoaded;

-1
//Here is a solution using JQuery    
<input type = "checkbox" class="a"/>one
    <input type = "checkbox" class="a"/>two
    <input type = "checkbox" class="a"/>three
    <script>
       $('.a').on('change', function() {
            $('.a').not(this).prop('checked',false);
    });
    </script>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.