I'm trying to Hide 3 Radio Buttons when Checkbox is unchecked when I checked it the all 3 buttons need to show in Jquery the code will be like
show_hide_fun: function(){
window.alert("Nadeem is running1");
$("#custom_jazz_s").hide();
$("#custom_jazz_m").hide();
$("#custom_jazz_c").hide();
$("#show_hide_jazz").click(function(){
if($("#show_hide_jazz").attr('checked'))
{window.alert("Nadeem is running2");
$("#custom_jazz_s").show();
$("#custom_jazz_m").show();
$("#custom_jazz_c").show();
}else{window.alert("Nadeem is running3");
$("#custom_jazz_s").hide();
$("#custom_jazz_m").hide();
$("#custom_jazz_c").hide();
}
});
},
list.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<h2>Pakistan</h2>
<div class="myJazz"><label for="show_hide_jazz">
<input type="radio" name="payment[method]" id="show_hide_jazz" data-bind="event: { click: myFunction }"> JazzCash</label>
</div>
<div if="isPaymentMethodsAvailable()"
class="items payment-methods">
<div repeat="foreach: paymentGroupsList, item: '$group'"
class="payment-group">
<div if="getRegion($group().displayArea)().length"
translate="getGroupTitle($group)"
class="step-title"
data-role="title">
</div>
<each args="data: getRegion($group().displayArea), as: 'method'" render=""/>
<h2>Testing</h2>
</div>
<div ifnot="isPaymentMethodsAvailable()"
class="no-payments-block"
translate="'No Payment Methods'">
</div>
and the other Id's I mentioned in my Jquery code is coming from other html
file
JazzCashS/view/web/template/payment/form.html
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="payment-method" id="custom_jazz_s" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio" name="payment[method]" class="radio" data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
<label class="label" data-bind="attr: {'for': getCode()}">
<img src="https://lh3.googleusercontent.com/-KR3uhnuU3qo/W4fpRKRGM0I/AAAAAAAAAFc/cmogQ-czRIcsQTkDwR-ZanDT--s6SC3HQCL0BGAYYCw/h50/2018-08-30.png"
alt="JazzCash Shop" width="100px" height="50px"
/>
<span data-bind="text: getTitle()"></span>
</label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() -->
<!-- /ko -->
<!--/ko-->
<p>
JazzCash Shop is an easy payment solution.<br /> Click "Place Order" and your JazzCash voucher number will be generated and displayed on your screen<br /> You can visit any JazzCash shop and pay against your token within 24 hours.<br /> To
see the list of JazzCash shop locations, <a href="http://www.jazzcash.com.pk/agent-locator/">Click Here</a><br /> You are almost done!<br /> To change or edit your order, go back. No changes will be allowed once you click "Place Order".<br
/>
</p><br><br>
<div class="actions-toolbar">
<div class="primary">
<!-- --><button class="action primary checkout" type="submit" data-bind="
click: placeOrder,
attr: {title: $t('Place Order')}">
<span data-bind="i18n: 'Place Order'"></span>
</button>
</div>
</div>
</div>
</div>
JazzCashC/view/web/template/payment/form.html
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="payment-method" id="custom_jazz_c" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio" name="payment[method]" class="radio" data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
<label class="label" data-bind="attr: {'for': getCode()}">
<!-- <img src="https://lh3.googleusercontent.com/-t8IBL-2jMOY/W4T5YR_HaHI/AAAAAAAAAFA/x68pD0gVP-EnMXqDkuBg6v9UPlk6RkcoACL0BGAYYCw/h512/2018-08-28.png"
alt="Jazz Cash Credit Card" width="50px" height="50px" /> -->
<img src="https://lh3.googleusercontent.com/-gqE4diqupEc/W4fpQTpyfnI/AAAAAAAAAFc/ccVFkANPyrgcVU1W-VAzMb-E6A7d7MDVgCL0BGAYYCw/h50/2018-08-30.png" alt="Jazz Cash Credit Card" width="100px" height="50px" />
<span data-bind="text: getTitle()"></span>
</label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() -->
<!-- /ko -->
<!--/ko-->
<p>
Any local or international Visa/Mastercard Credit or Debit Card holder can pay online.<br /> Please make sure your card is activated for online shopping.<br /> You are almost done!<br /> To change or edit your order, go back. No changes will
be allowed once you click "Place Order".<br />
</p><br><br>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout" type="submit" data-bind="
click: placeOrder,
attr: {title: $t('Place Order')}">
<span data-bind="i18n: 'Place Order'"></span>
</button>
</div>
</div>
</div>
</div>
JazzCashM/view/web/template/payment/form.html
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="payment-method" id="custom_jazz_m" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio" name="payment[method]" class="radio" data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
<label class="label" data-bind="attr: {'for': getCode()}">
<img src="https://lh3.googleusercontent.com/-oBKXNWhW9lY/W4fpR3i6tII/AAAAAAAAAFc/_KAo2ntBFTMuSfaNEhTqiD7gtoLO9tE4QCL0BGAYYCw/h50/2018-08-30.png" alt="JazzCash Mobile Account" width="100px" height="50px" />
<span data-bind="text: getTitle()"></span>
</label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() -->
<!-- /ko -->
<!--/ko-->
<p>
JazzCash Mobile Account can be registered on any Jazz or Warid number<br /> Biometric-verified Jazz and Warid customers can self-register their Mobile Account simply by dialing *786#.<br /> Enter the confirmation code within 30 seconds to
make a successful payment!<br /> You are almost done!<br /> To change or edit your order, go back. No changes will be allowed once you click "Place Order".<br />
</p><br><br>
<div class="actions-toolbar">
<div class="primary">
<!-- --><button class="action primary checkout" type="submit" data-bind="
click: placeOrder,
attr: {title: $t('Place Order')}">
<span data-bind="i18n: 'Place Order'"></span>
</button>
</div>
</div>
</div>
</div>
When I add this code in my list.js
file then it gives me many errors because this is a Jquery code how can I write the above code in knockoutjs like when #show_hide_jazz
is unclicked then #custom_jazz_s
, #custom_jazz_m
and #custom_jazz_c
needs to be hidden n when I clicked on #show_hide_jazz
then it need to be shown...
list.html