html izberite samo eno potrditveno polje v skupini

Kako lahko uporabniku dovolim, da izbere samo eno potrditveno polje?

Vem, da so radijski gumbi "idealni", vendar za moj namen...to ni.

Imam polje, v katerem morajo uporabniki izbrati eno ali dve možnosti, ne pa obeh. Težava je v tem, da moram uporabnikom omogočiti, da lahko svojo možnost tudi odkljukajo, in tu radijski gumbi ne uspejo, saj je treba, ko izberete skupino, izbrati možnost.

Informacije bom potrdil prek php, vendar bi uporabnike vseeno rad omejil na en odgovor, če ga želijo podati.

Programiranje
html checkbox
Npopoldan 37p14.3.20122tni 37trpopoldanni marec 2012 в 7:52
Še ni ogledov
Rešitev

Ta delček bo:

  • Omogoči združevanje v skupine, kot so radijski gumbi
  • deloval kot radijski gumbi
  • Omogočil odstranitev izbire vseh
// 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>

    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi

    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit

    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango
</div>
<div>
  <h3>Animals</h3>

    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger

    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth

    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah
</div>
bPratik
Edited answer Ndopoldan 32p29.10.20142tni 32trdopoldanni oktober 2014 в 11:21
Komentarji (10)

Radijski gumbi so idealni. Potrebujete le tretjo možnost "niti", ki je privzeto izbrana.

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

To bi moralo delovati za poljubno število potrditvenih polj v obrazcu. Če imate druge, ki niso del skupine, nastavite izbirnike za ustrezne vnose.

Komentarji (2)