webentwicklung-frage-antwort-db.com.de

Wie kann ein Optionsfeld durch Anklicken deaktiviert werden?

Im Gegensatz zu Kontrollkästchen ist es für den Benutzer nicht möglich, die Auswahl von Optionsfeldern aufzuheben, sobald sie angeklickt werden. Gibt es eine Möglichkeit, dass sie mit Javascript programmgesteuert umgeschaltet werden können? Dies wäre vorzugsweise ohne die Verwendung von jQuery.

35
Student

Możesz ustawić właściwość obiektu HTML checked na false w następujący sposób:

document.getElementById('desiredInput').checked = false;

przykład JavaScript

przykład jQuery

PS: PrzytrzymajCtrlklawisz, aby odznaczyć.

48
Teneff

Optionsfelder sind für die Verwendung in Gruppen gedacht, da sie das gleiche name-Attribut verwenden. Wenn Sie dann auf einen von ihnen klicken, wird die Auswahl des aktuell ausgewählten Elements aufgehoben. Damit der Benutzer eine von ihm getroffene "echte" Auswahl aufheben kann, können Sie ein Optionsfeld einschließen, das einer Null-Auswahl entspricht, wie "Weiß nicht" oder "Keine Antwort".

Wenn Sie eine einzelne Schaltfläche aktivieren oder deaktivieren möchten, verwenden Sie ein Kontrollkästchen.

Es ist möglich (aber normalerweise nicht relevant), einen Auswahlknopf in JavaScript zu deaktivieren, indem Sie einfach seine checked -Eigenschaft auf false setzen, z.

<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">
11

Eingepackt in ein Plugin

Einschränkungen:

  1. Formularelement erforderlich
  2. Muss ein Klickereignis auslösen, wenn das Optionsfeld programmgesteuert geändert wird

(function($) {
  $.fn.uncheckableRadio = function() {
    var $root = this;
    $root.each(function() {
      var $radio = $(this);
      if ($radio.prop('checked')) {
        $radio.data('checked', true);
      } else {
        $radio.data('checked', false);
      }
        
      $radio.click(function() {
        var $this = $(this);
        if ($this.data('checked')) {
          $this.prop('checked', false);
          $this.data('checked', false);
          $this.trigger('change');
        } else {
          $this.data('checked', true);
          $this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
        }
      });
    });
    return $root;
  };
}(jQuery));

$('[type=radio]').uncheckableRadio();
$('button').click(function() {
  $('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label><input name="myRadio" type="radio" value="V1" /> R1</label>
  <label><input name="myRadio" type="radio" value="V2" /> R2</label>
  <label><input name="myRadio" type="radio" value="V3" /> R3</label>
  <button type="button">Change R2</button>
</form>

10
Dummy

Da das Optionsfeld meistens in Gruppen verwendet wird, ist es viel einfacher, sie anhand von getElementsByName( ' ' ); in Ihrem Skript-Tag zu erfassen. Dadurch wird ein Array zurückgegeben, ein Ereignis-Listener für jedes untergeordnete Array gesetzt und der Überprüfungsstatus festgelegt. Schau dir dieses Beispiel an. 

var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){

    myRadios[x].onclick = function(){
        if(setCheck != this){
             setCheck = this;
        }else{
            this.checked = false;
            setCheck = null;
    }
    };

}

Diese Anleitung erklärt, wie der Code mit einer visuellen Demonstration funktioniert.

7
user3716078

Dies ist meine Antwort (obwohl ich es mit jQuery gemacht habe, aber nur für Selektoren und zum Hinzufügen und Entfernen einer Klasse, sodass Sie sie leicht mit reinen JS-Selektoren und reinem JS-Attribut ersetzen können.)

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})
7
Shmili Breuer

während es in Bezug auf Javascript gefragt wurde, ist die Anpassung von jquery trivial ... Mit dieser Methode können Sie den Wert "null" prüfen und ihn übergeben ... 

var checked_val = "null";
$(".no_option").on("click", function(){
  if($(this).val() == checked_val){
  	$('input[name=group][value=null]').prop("checked",true);
    checked_val = "null";
  }else{
  	checked_val = $(this).val();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">

2
me_

Die Antwort des Benutzers3716078 kann erweitert werden, um mehrere unabhängige Optionsfeldgruppen zu ermöglichen und die Ereignis-Listener auf verschiedene Weise zuzuordnen.

window.onload = function() {

    var acc_checked=[];

    [].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
        /**
         * i represents the integer value of where we are in the loop
         * el represents the element in question in the current loop
         */
        el.addEventListener('click', function(e){

            if(acc_checked[this.name] != this) {
                acc_checked[this.name] = this;
            } else {
                this.checked = false;
                acc_checked[this.name] = null;
            }

        }, false);

    });

}
1
A2D

Darauf bin ich gekommen:

function uncheck_radio_before_click(radio) {
    if(radio.prop('checked'))
        radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
    var radio=$(this);
    uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
    var label=$(this);
    var radio;
    if(label.attr('for'))
        radio=$('#'+label.attr('for')).filter('input[type="radio"]');
    else
        radio=label.children('input[type="radio"]');
    if(radio.length)
        uncheck_radio_before_click(radio);
})

http://jsfiddle.net/24vft2of/2/

1

Alte Frage, aber die Leute kommen immer wieder von Google und OP fragte am liebsten ohne jQuery, also hier ist mein Schuss.

Sollte auch auf IE 9

// iterate using Array method for compatibility
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
        radio.addEventListener('click', function(){
                var self = this;
                // get all elements with same name but itself and mark them unchecked
                Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
                        return self !== filterEl;
                }).forEach(function(otherEl) {
                        delete otherEl.dataset.check
                })

                // set state based on previous one
                if (this.dataset.hasOwnProperty('check')) {
                        this.checked = false
                        delete this.dataset.check
                } else {
                        this.dataset.check = ''
                }
        }, false)
})
<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>
0
Pedro Sanção

Vollständiges Beispiel in reinem JavaScript:

    <label style='margin-right: 1em;' onmouseup='var temp = this.children[0]; if (temp.checked) { setTimeout(function() { temp.checked = false; }, 0); }'><input type='radio' name='chk_préf_méd_perso' value='valeur'>libellé</label>
0
Jerry

Ich bin hierher gekommen, weil ich das gleiche Problem hatte. Ich wollte die Optionen dem Benutzer präsentieren und dabei die Option lassen, leer zu bleiben. Es ist zwar möglich, explizit mit Kontrollkästchen zu codieren, die das Back-End verkomplizieren würden.

Wenn Sie den Benutzer bei gedrückter Strg-Taste klicken, ist es fast so gut wie das Deaktivieren durch die Konsole. Der Mausefang ist zu früh und der Klick zu spät.

Nun, hier ist endlich eine Lösung! Setzen Sie diese wenigen Zeilen nur einmal auf die Seite und Sie haben es für alle Optionsfelder auf der Seite erstellt. Sie können sogar mit dem Wahlschalter arbeiten, um ihn anzupassen.

window.onload = function(){
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd){rd.addEventListener("mousedown",
	function(){
		if (this.checked) {this.onclick=function(){this.checked=false}} else{this.onclick=null}
	})})}
<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>

0
HaLeiVi

Wenn Sie das Iclick-Plug-In verwenden, ist es so einfach wie Sie unten sehen.

 $('#radio1').iCheck('uncheck');
0
MEO

In dem Optionsfeld Objekterstellungscode sind diese drei Zeilen enthalten:

  obj.check2 = false;    // add 'check2', a user-defined object property
  obj.onmouseup = function() { this.check2 = this.checked };
  obj.onclick = function() { this.checked = !this.check2 };
0
Cruzan

Sie können die checked-Eigenschaft eines Optionsfelds verwenden, um die Markierung aufzuheben.

Etwas wie das:

<script>
 function uncheck()
 {
  document.getElementById('myRadio').checked = false;        
 }
 function check()
 {
  document.getElementById('myRadio').checked = true;        
 }
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>

Sehen Sie es in Aktion hier: http://jsfiddle.net/wgYNa/

0
gideon

Ein funktionierendes, fehlerfreies Update für Shmili Breuer.

(function() {
    $( "input[type='radio'].revertible" ).click(function() {
        var $this = $( this );

        // update and remove the previous checked class
        var $prevChecked = $('input[name=' + $this.attr('name') + ']:not(:checked).checked');
            $prevChecked.removeClass('checked');

        if( $this.hasClass("checked") ) {
            $this.removeClass("checked");
            $this.prop("checked", false);
        }
        else {
            $this.addClass("checked");
        }
    });
})();
0
Eddie Dane

Leider funktioniert es nicht in Chrome oder Edge, aber in FireFox:

$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });
0
Frank Forte

Der vollständige Code sieht ungefähr so ​​aus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked"     onclick="setRadio(this)" />
<label for="myRadio"></label>


<script language="javascript">
function setRadio(obj) 
{
    obj.checked = false;
}
</script>
</body>
</html>
0
kiranvj

Hier ist ein Beispiel, wo es angebracht ist, die Auswahl der Optionsfelder zu deaktivieren, außer indem Sie eine neue Auswahl treffen. Ich habe ein Wörterbuch, dessen Einträge anhand verschiedener Indizes ausgewählt werden können. Welcher Index verwendet werden soll, wird mit Hilfe von Optionsfeldern ausgewählt. Es gibt jedoch auch eine Schaltfläche "Zufällige Eingabe", die der Benutzer verwenden kann, wenn er oder sie einfach nur browsen möchte. Das Beibehalten eines Indexes, wenn der Eintrag mit der Zufallstaste ausgewählt wurde, wäre irreführend. Wenn Sie diese Schaltfläche drücken, deaktivieren Sie alle Optionsschaltflächen der Indexauswahl und ersetzen den Inhalt des Indexrahmens durch eine leere Seite .

0
Bill Poser