webentwicklung-frage-antwort-db.com.de

html Wählen Sie nur ein Kontrollkästchen in einer Gruppe aus

Wie kann ich also einem Benutzer erlauben, nur ein Kontrollkästchen auszuwählen?

Ich weiß, Radioknöpfe sind "ideal", aber für meinen Zweck ... ist es nicht.

Ich habe ein Feld, in dem Benutzer entweder eine oder beide Optionen auswählen müssen, aber nicht beide. Das Problem ist, dass meine Benutzer auch die Möglichkeit haben müssen, ihre Auswahl aufzuheben. Dies ist der Fall, an dem Optionsfelder fehlschlagen, da nach Auswahl der Gruppe eine Option ausgewählt werden muss.

Ich werde die Informationen per PHP validieren, aber ich möchte die Benutzer immer noch auf eine Antwort beschränken, wenn sie sie geben wollen.

97
user962449

Dieser Ausschnitt wird:

  • Erlauben Sie das Gruppieren wie Optionsfelder
  • Benimm dich wie Radio
  • Alle abwählen lassen

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

152
bPratik

Sie möchten einen change()-Handler so binden, dass das Ereignis ausgelöst wird, wenn sich der Status eines Kontrollkästchens ändert. Deaktivieren Sie dann alle Kontrollkästchen, mit Ausnahme des Kontrollkästchens, das den Handler ausgelöst hat:

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

Hier ist eine Geige


Wie für die Gruppierung, wenn Ihre Checkbox "Gruppen" alle Geschwister waren:

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

Sie könnten das tun:

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

Hier ist eine andere Geige


Wenn Ihre Kontrollkästchen nach einem anderen Attribut gruppiert sind, z. B. 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[]" />

Sie könnten das tun:

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

Hier ist eine andere Geige

76
billyonecan

Radioknöpfe sind ideal. Sie benötigen lediglich eine dritte "keine" Option, die standardmäßig ausgewählt ist.

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

Dies sollte für eine beliebige Anzahl von Kontrollkästchen im Formular funktionieren. Wenn Sie andere Personen haben, die nicht zur Gruppe gehören, stellen Sie die entsprechenden Eingänge mit den Selektoren ein.

6
Surreal Dreams

Hier ist eine einfache HTML- und JavaScript-Lösung, die ich bevorzugt:

// js-Funktion, um jeweils nur ein Ankreuzfeld eines Wochentags zu markieren:

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

Es gibt bereits einige Antworten darauf, die auf reinem JS basieren, aber keine davon ist so kurz, wie ich es gerne hätte.

Hier ist meine Lösung basierend auf der Verwendung von Namens-Tags (wie bei Radiobuttons) und ein paar Zeilen Javascript.

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

5
Evertvdw

Möge dieser Code Ihnen helfen.

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

Arbeitslink hier klicken

4
Om Shankar

Aufbauend auf der Antwort von billyonecan können Sie den folgenden Code verwenden, wenn Sie dieses Snippet für mehr als ein Kontrollkästchen benötigen (vorausgesetzt, sie haben unterschiedliche Namen).

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

Beispiel mit 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
DAS

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

Wenn jemand eine Lösung ohne externe Javascript-Bibliotheken benötigt, können Sie dieses Beispiel verwenden. Eine Gruppe von Kontrollkästchen, die 0..1-Werte zulassen. Sie können auf die Kontrollkästchen-Komponente oder den zugehörigen Beschriftungstext klicken.

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

Während JS wahrscheinlich der richtige Weg ist, könnte es nur mit HTML und CSS gemacht werden .

Hier haben Sie ein falsches Optionsfeld, das wirklich eine Bezeichnung für ein wirklich verstecktes Optionsfeld ist. Auf diese Weise erhalten Sie genau den Effekt, den Sie benötigen.

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

Sehen Sie es hier: https://jsfiddle.net/tn70yxL8/2/

Dies setzt voraus, dass Sie nicht auswählbare Beschriftungen benötigen.

Wenn Sie bereit wären, die Beschriftungen einzuschließen, können Sie das Wiederholen der Deaktivierung technisch vermeiden, indem Sie den Text in CSS ändern. Siehe hier: https://jsfiddle.net/7tdb6quy/2/

0
SamGoody