Étiquette : booléen

[Javascript] Annuler la sélection d’un bouton radio

11/01/2022 / admin

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

function deselectableRadios(rootElement) {
    if(!rootElement) rootElement = document;
    if(!window.radioChecked) window.radioChecked = {};
    window.radioClick = function(e) {
        const obj = e.target, name = obj.name || "unnamed";
        if(e.keyCode) return obj.checked = e.keyCode!=32;
        obj.checked = window.radioChecked[name] != obj;
        window.radioChecked[name] = obj.checked ? obj : null;
    }
    rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
        radio.setAttribute("onclick", "radioClick(event)");
        radio.setAttribute("onkeyup", "radioClick(event)");
    });
}
deselectableRadios( $_IMPRINT_LIST );

function deselectableRadios(rootElement) {

if(!rootElement) rootElement = document;

if(!window.radioChecked) window.radioChecked = {};

window.radioClick = function(e) {

const obj = e.target, name = obj.name || "unnamed";

if(e.keyCode) return obj.checked = e.keyCode!=32;

obj.checked = window.radioChecked[name] != obj;

window.radioChecked[name] = obj.checked ? obj : null;

}

rootElement.querySelectorAll("input[type='radio']").forEach( radio => {

radio.setAttribute("onclick", "radioClick(event)");

radio.setAttribute("onkeyup", "radioClick(event)");

});

}

deselectableRadios( $_IMPRINT_LIST );

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

27/11/2020 / admin

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

<?php if ($prefix) : ?>
    <div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">
        <?php if ($block->getPrefixOptions() === false) : ?>
            <label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>
        <?php endif; ?>

        <?php if ($block->getPrefixOptions() === false) : ?>
            <div class="control">
                <input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"
                       name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                       value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"
                       title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"
                       class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>
            </div>
        <?php else : ?>
            <?php foreach ($block->getPrefixOptions() as $_option) : ?>
                <?php if (!$block->escapeHtml(__($_option) == " ")) : ?>
                    <div class="field choice">
                        <div class="control">
                            <input
                                type="radio"
                                name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                                id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"
                                value="<?= $block->escapeHtml(__($_option)) ?>" 
                                <?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
                                <?php if ($option == $block->getObject()->getPrefix()) : ?>
                                    checked="checked" 
                                <?php endif; ?>
                                class="radio"/>
                            <label
                                class="label"
                                for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">
                                <span><?= $block->escapeHtml(__($_option)) ?></span>
                            </label>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php if ($prefix) : ?>

<div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">

<?php if ($block->getPrefixOptions() === false) : ?>

<label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>

<?php endif; ?>

<?php if ($block->getPrefixOptions() === false) : ?>

<input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"

title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"

class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>

</div>

<?php else : ?>

<?php foreach ($block->getPrefixOptions() as $_option) : ?>

<?php if (!$block->escapeHtml(__($_option) == " ")) : ?>

<input

type="radio"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"

value="<?= $block->escapeHtml(__($_option)) ?>"

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

class="radio"/>

<label

class="label"

for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">

<span><?= $block->escapeHtml(__($_option)) ?></span>

</label>

</div>

<?php endif; ?>

<?php endforeach; ?>

<?php endif; ?>

</div>

<?php endif; ?>

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
<?php if ($option == $block->getObject()->getPrefix()) : ?>
    checked="checked" 
<?php endif; ?>

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

Se rendre dans STORES > Attributes > Customer
Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
Scroller jusqu’au volet « Storefront Properties »
Passer le champ « Show on Storefront » à « Yes »
Cliquer sur le bouton orange « Save Attribute »

Se rendre ensuite dans STORES > Settings > Configuration
Passer le Scope au store voulu
Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
Ouvrir le volet « Name and Address Options »
Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
Cliquer sur le bouton orange « Save Config »

Se rendre ensuite dans SYSTEM > Tools > Cache Management
Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

08/04/2019 / admin

Ressources en ligne: Setting “checked” for a checkbox with jQuery?

<td class="col-damaged col-boolean" onClick="$(this).booleanIntent(event);">
  <input type="checkbox" id="product_00001_damaged" name="product_00001" />
</td>

</td>

ATTENTION: l’utilisation de $(this) dans la fonction pour récupérer l’élément cliqué empêche le clic sur l’élément <input type="checkbox" /> lui-même! On préférera utiliser event.target pour cibler l’élément cliqué.

Code non commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      return false;
    } else {
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');

      if ( CHECKED_VALUE != true ) {
        $_INPUT.prop('checked', true);
      } else {
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

return false;

} else {

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

if ( CHECKED_VALUE != true ) {

$_INPUT.prop('checked', true);

} else {

$_INPUT.prop('checked', false);

}

Code commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      console.log('is input');
      return false;
    } else {
      console.log('is not input');
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');
      console.log('CHECKED_VALUE: '+CHECKED_VALUE);

      if ( CHECKED_VALUE != true ) {
        console.log('input is not checked, so we check it');
        $_INPUT.prop('checked', true);
      } else {
        console.log('input is checked, so we uncheck it');
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

console.log('is input');

return false;

} else {

console.log('is not input');

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

console.log('CHECKED_VALUE: '+CHECKED_VALUE);

if ( CHECKED_VALUE != true ) {

console.log('input is not checked, so we check it');

$_INPUT.prop('checked', true);

} else {

console.log('input is checked, so we uncheck it');

$_INPUT.prop('checked', false);

}

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

12/06/2015 / admin

A voir aussi : Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen.

jQuery(document).ready(function(){
    // http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/
    jQuery('.radio-boxes-group').on('click', '.radio-box', function(){
        var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name');

        jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked');
        jQuery(this).find('input:radio')[0].checked = true;

        if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {
            jQuery(this).toggleClass('is-checked');
        } else {
            // do nothing ...
        }
    });
});

jQuery(document).ready(function(){

// http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/

jQuery('.radio-boxes-group').on('click', '.radio-box', function(){

var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name');

jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked');

jQuery(this).find('input:radio')[0].checked = true;

if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {

jQuery(this).toggleClass('is-checked');

} else {

// do nothing ...

}

});

<!-- 1er groupement de boutons radio -->
<div class="radio-boxes-group">
    <div class="row">
        <div class="six columns payment-mode">
            <div class="radio-box is-checked">
                <input type="radio" id="monthly_payment" name="payment_mode" value="" checked="checked" />
                <div class="information">
                    <label for="monthly_payment">Par mois</label>
                    <p class="complementary-information">15€/mois</p>
                </div>
            </div>
        </div>
        <div class="six columns payment-mode">
            <div class="radio-box">
                <input type="radio" id="yearly_payment" name="payment_mode" value="" />
                <div class="information">
                    <label for="yearly_payment">En une fois</label>
                    <p class="complementary-information">180€ pour 1 an</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 2ème groupement de boutons radio -->
<div class="radio-boxes-group">
    <div class="row">
        <div class="twelve columns payment-method">
            <div class="radio-box is-checked">
                <input type="radio" id="cb_method" name="payment_method" value="" checked="checked" />
                <div class="information">
                    <label for="cb_method">Prélèvement CB</label>
                    <p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns payment-method">
            <div class="radio-box">
                <input type="radio" id="cheque_method" name="payment_method" value="" />
                <div class="information">
                    <label for="cheque_method">Par chèque</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns payment-method">
            <div class="radio-box">
                <input type="radio" id="sepa_method" name="payment_method" value="" />
                <div class="information">
                    <label for="sepa_method">Prélèvement SEPA (RIB)</label>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

</div>

<label for="cb_method">Prélèvement CB</label>

<p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p>

</div>

<label for="cheque_method">Par chèque</label>

</div>

<label for="sepa_method">Prélèvement SEPA (RIB)</label>

</div>

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

<div class="radio-box">
    <input onclick="[...]" />
</div>

</div>

Ajouter une ligne de code jQuery pour statuer qu’un clic utilisateur sur une zone .radio-box, compte pour un clic sur le champ radio ou checkbox dont il est le parent.

if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {
    jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input.
    jQuery(this).toggleClass('is-checked');
} else {
    // do nothing ...
}

if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) {

jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input.

jQuery(this).toggleClass('is-checked');

} else {

// do nothing ...

}

Articles récents

Catégories

Archives

Méta

Étiquette : booléen

[Javascript] Annuler la sélection d’un bouton radio

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

PHTML à modifier

A savoir:

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

Code non commenté

Code commenté

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

PHTML à modifier

A savoir:

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

Code non commenté

Code commenté

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen