jQuery: les cases à cocher agissent-elles comme des boutons radio?
Existe-t-il un moyen de faire en sorte que les cases à cocher agissent comme des boutons radio? Je suppose que cela pourrait être fait avec jQuery?
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
Si une case était cochée, les autres membres du groupe seraient décochés.
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Cela le fera, bien que je convienne que cela pourrait être une mauvaise idée.
Exemple en ligne: http://jsfiddle.net/m5EuS/1/
UPDATEajout d'une séparation de groupe.
Mis à jour pour Jquery 1.9 - utilisez .prop() au lieu de .attr()
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
Voici un exemple: http://jsfiddle.net/m5EuS/585/
en gros, la même réponse que @amosrivera, mais décochez la case si nécessaire. utilisez plutôt .not ()
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).not(this).prop("checked",false);
});
Si vous appliquez classe à la case à cocher, vous pouvez facilement activer la fonctionnalité du bouton radio à l'aide du code suivant:
$(".make_radio").click(function(){
$(".make_radio").not(this).attr("checked",false);
});
Peut-être que vous souhaitez envisager une approche différente. Je pense que vous souhaitez que le bouton radio ressemble à une case à cocher. Si oui, voir: cette recherche google
Et ci-dessous, un exemple simplifié que j’emprunte à www.thecssninja.com.
Pour le dire simplement: vous masquez le bouton radio actuel (voir l’entrée css [type = radio]) et vous appelez l’icône correspondant au bouton radio correspondant pour afficher la case à cocher personnalisée (à partir du css Sprite dans l’arrière-plan de l’image saisie = radio] + label) et passez à un Sprite différent en arrière-plan lorsque le bouton radio est en état de contrôle. Exemple utilisé ici: http://jsfiddle.net/jchandra/R5LEe/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Custom CSS3 control facade</title>
<style type='text/css'>
label {
padding: 0 0 0 24px;
}
input[type=radio] {
padding:0;
margin:0;
width:16px;
height:16px;
position:absolute;
left:0;
opacity:0
}
input[type=radio] + label {
background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
width:50px;
height:16px;
}
input[type=radio]:checked + label {
background-position:0 -81px;
}
</style>
</head>
<body>
Custom control images and concept from www.thecssninja.com<br/>
<br/>
<input type="radio" class="radio" value="1" name="fooby[1][]" id="r1" /><label for="r1"></label>
<input type="radio" class="radio" value="2" name="fooby[1][]" id="r2" /><label for="r2"></label>
<input type="radio" class="radio" value="3" name="fooby[1][]" id="r3" /><label for="r3"></label>
<br/>
<input type="radio" class="radio" value="1" name="fooby[2][]" id="r4" /><label for="r4"></label>
<input type="radio" class="radio" value="2" name="fooby[2][]" id="r5" /><label for="r5"></label>
<input type="radio" class="radio" value="3" name="fooby[2][]" id="r6" /><label for="r6"></label>
</body>
</html>
Mise à jour du script (via la réponse de Tomislav) afin que vous puissiez également décocher TOUTES les cases à cocher. Vient d’ajouter un .not (this) et a supprimé la ligne où la case à cocher actuelle est cochée.
$('form').each(function() { // iterate forms
var $this = $(this);
$this.find('input:checkbox').click(function() {
var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
$this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change
});
});
Je voudrais commenter mais je n'ai pas le représentant. Utilisez .change, pas .click pour l'accessibilité et cela fonctionne avec le clavier, comme ceci:
jQuery(".radio-check-box").change( function() {
var checked = jQuery(this).prop("checked");
jQuery(".radio-check-box").attr("checked", false);
jQuery(this).prop("checked", checked);
} );
La solution donnée ne se soucie pas de l'état initial, ce qui diffère du comportement des boutons radio. De plus, il déclenche également un événement de changement lorsque vous cliquez sur une entrée déjà cochée.
var $elements = $('input:checkbox');
// Allow only one input to be selected
$elements.filter(':checked:not(:last)').prop('checked', false);
// Get selected input
var selected = $elements.filter(':checked')[0] || {};
// Handle event
$(document).on('click', 'input:checkbox', function(e) {
if (e.currentTarget === selected) {
e.preventDefault();
} else {
selected.checked = false;
selected = e.currentTarget;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" value="0" /> test 0</label>
<label><input type="checkbox" value="1" checked /> test 1</label>
<label><input type="checkbox" value="2" checked /> test 2</label>
<label><input type="checkbox" value="3" /> test 3</label>Je conviens également que cela est une mauvaise idée, mais si vous avez un nom différent pour chaque entrée (et ne pouvez pas les changer), il n'y a pas d'autre choix ...
J'ai mis à jour le script Fiddle, jQuery était manquant. Maintenant, avec prop et attr (utilisez les deux).
$('form').each(function() { // iterate forms
var $this = $(this);
$this.find('input:checkbox').click(function() {
var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
$this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change
$(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change
});
});
Si vous sélectionnez "$ (" entrée: case à cocher ")", toutes les cases seront cochées afin que vous puissiez spécifier les différents boutons radio en utilisant leur nom.
$("[name='sname1']").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
L'exemple ci-dessous explique
$("[name='sname1']").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="border:1px solid">
<label><input type="checkbox" id="Titleblink_check" name="sname1">Blink</label>
(OR)
<label><input type="checkbox" id="Titleshine_check" name="sname1">Shine Text</label>
<br>
</div>
<label><input type="checkbox" id="id1" >Diff Check box1</label>
<br>
<label><input type="checkbox" id="id2">Diff Check box2</label>
<br>
<label><input type="checkbox" id="id3">Diff Check box3</label>
<br>$ (this) .prop ("coché", vrai); });
Utilisez l'événement de changement de la case à cocher et attribuez la valeur cochée à la case à cocher actuellement sélectionnée:
$("input[type=checkbox]").change(function()
{
$("input[type=checkbox]").prop('checked',false);
$(this).prop('checked',true);
});.checkBoxb{
float:left;
clear:both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkBoxb"><input type="checkbox" /> CheckBox1</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox2</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox3</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox4</label>