Tab as radio select and clear checkboxes on tab change foundation 6 - javascript

Im trying to make tabs with showing options. like:
showing options
Show for all
Hide for all
Show for specific
Hide for specific
these are the tabs and also these are radio select buttons
(looks like radio button but on check switchs to it's tab content)
And every tab content has it's own checkbox select list (except "show for all" and "Hide for all")
But, on showing option change inner content of all other tabs needs to be unchecked
Foundation 6, Jquery, CSS

The aim of this question is to use it a form, so you can select item showing options, and according to your select there will be available items for showing.
FORM.HTML
<div class="row">
<div class="medium-12 columns">
<ul class="clear-list">
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="all" checked>
Show on all pages
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="none">
Don't show on any page
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="selected">
Show only on selected
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="except">
Show on all except selected
</label>
</li>
</ul>
<script>
$(document).ready(function () {
$("input[name=module_show_option]:radio").click(function () { // attack a click event on all radio buttons with name 'radiogroup'
if ($(this).val() == 'all') {
$("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
} else if ($(this).val() == 'none') {
$("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
} else if ($(this).val() == 'selected') { //check which radio button is clicked
$("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
} else if ($(this).val() == 'except') { //check which radio button is clicked
$("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
}
});
});
</script>
</div>
</div>
<div class="row">
<div class="medium-12 columns">
<label>
<input type="checkbox" name="module_menu_item_id" value="1">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="2">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="3">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="4">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="4">
</label>
</div>
</div>
As you can see I've rejected idea of tabbing content, instead I used disabling input fields, so it will disable checked items from pasting in POST body, and also it will preserve them from losing while you can chenge your decision

Related

The first radio button is unchecked while selecting the second one

I have checkboxes and radio buttons on my page.
I have some scenario.
When the user selects the first checkbox then the first radio will select and if you unchecked the checkbox then the radio button will unchecked.
If the user directly selects the radio button then the nearest checkbox will select.
The above scenarios are almost working, I am getting the issue on the second checkbox.
I select the first checkbox then the first radio button is selected. If I select the second check then the radio button is selecting but the first radio is unchecked.
$("input[type='radio']").click(function() {
$(this).closest('.reviewers-details').find('.selectRV').prop('checked', true);
});
$("input[type='checkbox']").click(function() {
var checkbox = $(this).closest('.reviewers-details').find('.selectRV').prop('checked');
if (checkbox == true) {
// $(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', true);
$(this).closest('.reviewers-details').find('input[type=radio]:first').prop('checked', true);
} else if ($(this).prop("checked") == false) {
$(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', false);
}
});
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">test
<ul>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">
<label>abc</label>:
</li>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">demo
<ul>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">
<label>abc</label>:
</li>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
All radio buttons with the same value for their name attribute will be part of the same radio group: if one becomes selected, the others automatically become unselected.
Below, I simply renamed the radio buttons in your second group to isolate them (and their linked checkbox) from the first group.
(You may want to rename the checkbox as well, unless you have a reason for it to share a name with the first checkbox.)
$("input[type='radio']").click(function() {
$(this)
.closest('.reviewers-details')
.find('.selectRV')
.prop('checked', true);
});
$("input[type='checkbox']").click(function() {
var checkbox = $(this)
.closest('.reviewers-details')
.find('.selectRV')
.prop('checked');
if (checkbox == true) {
$(this)
.closest('.reviewers-details')
.find('input[type=radio]:first')
.prop('checked', true);
}
else if ($(this).prop("checked") == false) {
$(this)
.closest('.reviewers-details')
.find('input[type=radio]')
.prop('checked', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox"
name="reviewerid[1]"
class="revieweruser selectRV"
value="1"
/>test
<ul>
<li>
<input type="radio"
name="reviewer_timeslot[1]"
class="revieweruser"
value="1"
/>
<label>abc</label>:
</li>
<li>
<input type="radio"
name="reviewer_timeslot[1]"
class="revieweruser"
value="3"
/>
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox"
name="reviewerid[1]"
class="revieweruser selectRV"
value="1"
/>demo
<ul>
<li>
<input type="radio"
name="reviewer_timeslot[2]"
class="revieweruser"
value="1"
/>
<label>abc</label>:
</li>
<li>
<input type="radio"
name="reviewer_timeslot[2]"
class="revieweruser"
value="3"
/>
<label>xyz</label>:
</li>
</ul>
</div>
</div>

Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

On click function uncheck other radio buttons

I have given code
<ul id="payment-method-fields">
<li id="paypal">
<label>
<input checked="checked" id="order_payments_attributes__payment_method_id_5" name="order[payments_attributes][][payment_method_id]" type="radio" value="5">
Test Paypal
</label>
</li>
<li id="adyen">
<label>
<input id="order_payments_attributes__payment_method_id_4" name="order[payments_attributes][][payment_method_id]" type="radio" value="4">
Ali Pay
</label>
</li>
<li id="adyen_encrypted">
<label>
<input id="order_payments_attributes__payment_method_id_16" name="order[payments_attributes][][payment_method_id]" type="radio" value="16">
credit card
</label>
</li>
<li id="cod" >
<label>
<input id="cash-on-delivery" name="cod" type="radio" value="">
Cash on Delivery
</label>
</li>
</ul>
my requirement is when click on other li i.e on Cash on Delivery then paypal gets unchecked. Please guide me how I will write this jquery.
My proposal is:
$('#payment-method-fields :input[type="radio"]').on('change', function(e) {
if (this.id == 'cash-on-delivery') {
$('#payment-method-fields').find('input[type="radio"]:not(#' + this.id + ')').prop('checked', false);
}
});
You can do this:
$('#cash-on-delivery').on('change', function(){
$('input[name="order[payments_attributes][][payment_method_id]"]')
.prop('checked', !this.checked);
});
Simply give them the same name for all input tags
Example:
<input type="radio" name="group_name" />
This ensures only one is selected at any time.
You can give all inputs a same class for example
class="radio_button"
And then you can add code
$(document).ready(function(){
$('.radio_button').on('click',function(){
$('.radio_button').removeAttr('checked');
$(this).prop('checked','checked');
})
}
The last input has a different name <input id="cash-on-delivery" name="cod" type="radio" value=""> than the others so when you check it the others won't automatically uncheck. Give it the same name and it will work fine.
Here is an Example of it working.
Code:
<ul id="payment-method-fields">
<li id="paypal">
<label>
<input checked="checked" id="order_payments_attributes__payment_method_id_5" name="order[payments_attributes][][payment_method_id]" type="radio" value="5">
Test Paypal
</label>
</li>
<li id="adyen">
<label>
<input id="order_payments_attributes__payment_method_id_4" name="order[payments_attributes][][payment_method_id]" type="radio" value="4">
Ali Pay
</label>
</li>
<li id="adyen_encrypted">
<label>
<input id="order_payments_attributes__payment_method_id_16" name="order[payments_attributes][][payment_method_id]" type="radio" value="16">
credit card
</label>
</li>
<li id="cod" >
<label>
<input id="cash-on-delivery" name="order[payments_attributes][][payment_method_id]" type="radio" value="">
Cash on Delivery
</label>
</li>
</ul>
Removing the property 'checked' from the input-elements with the jQuery removeProp function. For your example create two functions and call them in the onClick trigger of your input-elements:
function uncheckTop3() {
$('#order_payments_attributes__payment_method_id_5').removeProp('checked');
$('#order_payments_attributes__payment_method_id_4').removeProp('checked');
$('#order_payments_attributes__payment_method_id_16').removeProp('checked');
}
function uncheckCashOnDelivery() {
$('#cash-on-delivery').removeProp('checked');
}
Here a jfiddle-link to your example.
To check/uncheck a checkbox, use the attribute checked and alter that. With jQuery you can do:
//$('#myCheckbox').attr('checked', true); // Checks it
//$('#myCheckbox').attr('checked', false); // Unchecks it
$('#cash-on-delivery').on('change', function(){
$('input[name="order[payments_attributes][][payment_method_id]"]').attr('checked',true);
});

show a field if only a certain radio button is checked

i have two radio buttons used in my form and follow to those two radio buttons i have another field.
I want to show that field if only a certain radio button is checked.otherwise by default it should be hidden.
My code
Payment Type
<div class="list">
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Immediate Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Scheduled Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
Here i want to show effective date field only if the user checks the Scheduled Payment radio button. How can i do this?
$("input[name=group]").change(function () {
if ($(this).val() == 'scheduled' && $(this).is(":checked")) {
$("#effectiveWrapper").show();
} else {
$("#effectiveWrapper").hide();
}
});
http://jsfiddle.net/wdckktz7/
AngularJS Code
<div ng-show="payment == 'scheduled'">
<label>
<h4><b>Effective Date*</b></h4>
</label>
<input type="date" />
</div>
http://jsfiddle.net/orr1p1eg/
$("input:radio[name='group']").click(function() {
var value = $(this).val();
if (value == 'Scheduled Payment'){
$("#div").show();
}
else {
$("#div").hide();
}
});
and put your date input inside the div:
<div id="div">
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
</div>

Jquery special selection

I have the following html code:
<div class="Radios">
<span class="radio">
<input type="radio" value="1"> yes
<input type="radio" value="0"> no
</span>
</div>
<div class="More">hello</div>
<div class="More">hello</div>
<div class="Radios">
<span class="radio">
<input type="radio" value="1"> yes
<input type="radio" value="0"> no
</span>
</div>
<div class="More">hello</div>
<div class="Radios">
<span class="radio">
<input type="radio" value="1"> yes
<input type="radio" value="0"> no
</span>
</div>
<div class="More">hello</div>
<div class="More">hello</div>
<div class="More">hello</div>
By default all the divs with class=more should be hidden. I use $('div.More').hide()
The difficult thing is that when a user clicks in a radio with value '1' all the divs.More next siblings to div.Radios should be shown (but only the inmediate siblings, not all the divs.More).
Until now, i have the parent of an element clicked, but i cannot select the next div.More elements until the next div.Radios.
Could you give me a hand?
Best Regards.
Jose
but i cannot select the next div.More elements until the next div.Radios.
Use nextUntil():
$('input[type=radio][value=1]').click(function () {
$(this).parents('.Radios').nextUntil('.Radios').show();
}
Well first off, the radio inputs that you click on are 2 levels down from the parent you care about, ".Radios".
So you want to be able to get that parent before you do anything else, something like this:
$("[type=radio]").click(function(){
var realParent = $(this).parents(".Radios");
});
Now that you have the parent you can easily get the .next() and .prev() sibling element:
$("[type=radio]").click(function(){
var realParent = $(this).parents(".Radios");
realParent.next().show();
realParent.prev().show();
});

Categories