Добавить класс в верхний li, когда проверяется вход для подкладки

Question

Я использую список с элементами <li>, где я хочу добавить класс в li, когда отмечен вход внутри <li>.

Как я могу это достичь?

HTML:

<dl class="sp-methods" id="checkout-payment-method-load"> 
    <?php foreach ($methods as $_method): 
     $_code = $_method->getCode(); 
?> 
    <li class="formListBlock payment_<?php echo $_code ?>"> 
    <?php if(!$oneMethod): ?> 
    <label for="p_method_<?php echo $_code ?>"> 
     <input id="p_method_<?php echo $_code ?>" value="<?php echo $_code ?>" type="radio" name="payment[method]" title="<?php echo $this->escapeHtml($_method->getTitle()) ?>" onclick="payment.switchMethod('<?php echo $_code ?>')"<?php if($this->getSelectedMethodCode()==$_code): ?> checked="checked"<?php elseif($_code == $this->__('ops_iDeal')): ?>checked="checked"<?php endif; ?> class="radio" /> 
     <p class="payment-title"><?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?> <?php echo $this->getMethodLabelAfterHtml($_method) ?></p> 
    <?php else: ?> 
     <span class="no-display"><input id="p_method_<?php echo $_code ?>" value="<?php echo $_code ?>" type="radio" name="payment[method]" checked="checked" class="radio" /></span> 
     <?php $oneMethod = $_code; ?> 
    <?php endif; ?> 
    <?php if ($html = $this->getPaymentMethodFormHtml($_method)): ?> 
    <span class="payment_icon_<?php echo $_code ?>"></span> 
    <span class="gratis">TEXT</span> 
    <span class="paypal"> TEXT </span> 
    </label> 
    <div class="formListBlock-selector payment_<?php echo $_code ?>"> 
     <?php echo $html; ?> 
    </div> 
    </li> 
    <?php endif; ?> 
<?php endforeach; 
    </dl> 

JQuery:

$('input:radio').change(function(){ 
    if($(this).is(":checked")) { 
     $('li.formListBlock').addClass("menuitemshow"); 
    } else { 
     $('li.formListBlock').removeClass("menuitemshow"); 
    } 
}); 

Answer 1

Вы должны использовать $("#ul_id [name='name']") для выбора всех входов с определенным именем и .closest("li") получить ближайший <li> тег.

Смотрите этот пример

$("#checkout-payment-method-load [name='payment[method]']").change(function() { 
 
$("#checkout-payment-method-load [name='payment[method]']").each(function(){ 
 
    if ($(this).is(":checked")) { 
 
    $(this).closest("li").addClass("menuitemshow"); 
 
    } else { 
 
    $(this).closest("li").removeClass("menuitemshow"); 
 
    } 
 
}); 
 
});

.menuitemshow { 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="sp-methods" id="checkout-payment-method-load"> 
 
    <li class="formListBlock payment_ops_cc"> 
 
    <label for="p_method_ops_cc"> 
 
     <input id="p_method_ops_cc" value="ops_cc" type="radio" name="payment[method]" title="Creditcard" onclick="/*payment.switchMethod('ops_cc')*/" class="radio validation-passed" autocomplete="off"> 
 
     <p class="payment-title">Creditcard</p> 
 
     <span class="payment_icon_ops_cc"></span> 
 
     <span class="gratis">Text</span> 
 
     <span class="paypal">Text</span> 
 
    </label> 
 
    </li> 
 

 
    <li class="formListBlock payment_ops_cc"> 
 
    <label for="p_method_ops_cc"> 
 
     <input id="p_method_ops_cc2" value="ops_cc" type="radio" name="payment[method]" title="Creditcard" onclick="/*payment.switchMethod('ops_cc')*/" class="radio validation-passed" autocomplete="off"> 
 
     <p class="payment-title">Creditcard</p> 
 
     <span class="payment_icon_ops_cc"></span> 
 
     <span class="gratis">Text</span> 
 
     <span class="paypal">Text</span> 
 
    </label> 
 
    </li> 
 
</ul>