Javascript Show/Hide on radiobutton - javascript

I have 3 radiobuttons labeled 'Squat', 'Benchpress' and 'Deadlift' which each show and hide an associated dropdown menu, (I have 3 dropdown but only one is show at each time, containing different data)
Though now I've added 3 more radiobuttons, called 'Primary', 'Secondary' and 'Assistance'. Now if primary & assistance radiobutton is selected I dont wany any dropdown to be visible at all, only when Secondary is selected. And when Secondary is selected it should only be one visible as it is at the moment! I just can't seem to get it to work.
I include this fiddle so you can get a visual and see what I mean!
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm/dd" }).val()
});
//Script for hiding dropdown menus and showing the one connected
//to the right exercise based on which radiobutton is selected.
$(function() {
$("input[type='radio']").change(function() {
if ($(this).val() == 1 && this.checked) {
$("#exerVariNameS").show();
$("#exerVariNameB").hide();
$("#exerVariNameD").hide();
} else if ($(this).val() == 2 && this.checked){
$("#exerVariNameS").hide();
$("#exerVariNameB").show();
$("#exerVariNameD").hide();
} else if ($(this).val() == 3 && this.checked) {
$("#exerVariNameS").hide();
$("#exerVariNameB").hide();
$("#exerVariNameD").show();
}
});
//Remember which radiobutton was last clicked and keeps it that way
//after a page refresh or form post.
$('input[type=radio]').each(function() {
var state = JSON.parse( localStorage.getItem('radio_' + this.id) );
if (state) this.checked = state.checked;
$(this).trigger('change');
});
$(window).bind('unload', function() {
$('input[type=radio]').each(function() {
localStorage.setItem('radio_' + this.id, JSON.stringify({checked: this.checked}));
});
});
});
https://jsfiddle.net/o7m0d4uu/4/
Please ask if I explained badly!

All you need is to trigger an click event handler to radio buttons with name="Type".
Here is solution:
$("input[name='Type']").click(function(){
var value=$(this).val();
switch(value){
case '4':
$("input[name='Exercise']").each(function(){
$(this).closest('div').hide();
});
$('#dropdown').hide();
break;
case '5':
$("input[name='Exercise']").each(function(){
$(this).closest('div').show();
});
$('#dropdown').show();
break;
case '6':
$("input[name='Exercise']").each(function(){
$(this).closest('div').hide();
});
$('#dropdown').hide();
break;
}
});
Here is a working solution

Related

How to navigate in jquery ui accordion when one panel is disabled

I have an jquery ui accordion. In every panel there is next or/and previous button that navigates me through the accordion panels. This is working. On one panel i have a select html element. In this element i can choose an option. If option1: don't disable me the second accordion section. If option2: disable the second section.
This is also working.
The problem is when i select the option2 and the secend section is disable i can still access it via the button. How can i disable it and go to the third section ?
my jsfiddle:
https://jsfiddle.net/wgjfovnf/
$(function() {
$("#accordion").accordion();
$('#accordion button[name=tab-control]').on('click',function (e) {
e.preventDefault();
var control = ($(this).is('.next') ? 1 : -1);
$('#accordion').accordion('option', 'active', ($('#accordion').accordion('option', 'active') + control));
});
$('#selectSection').on('change', function() {
if($(this).val() === 's2') {
$('#ui-id-3').addClass('ui-state-disabled');
}
else {
$('#ui-id-3').removeClass('ui-state-disabled');
}
});
You can disable next button while you selecting option2
Here you can try this
EDIT
$(function() {
$("#accordion").accordion();
$('#accordion button[name=tab-control]').on('click',function (e) {
e.preventDefault();
if($(this).attr('skip') != undefined) {
var control = ($(this).is('.next') ? 2 : -2);
} else {
var control = ($(this).is('.next') ? 1 : -1);
}
$('#accordion').accordion('option', 'active',
($('#accordion').accordion('option', 'active') + control)
);
});
$('#selectSection').on('change', function() {
if($(this).val() === 's2') {
$('.next').attr("skip","true");
$('.previous').attr("skip","true");
$('#ui-id-3').addClass('ui-state-disabled');
}
else {
$('.next').removeAttr("skip");
$('.previous').removeAttr("skip");
$('#ui-id-3').removeClass('ui-state-disabled');
}
});
});
Here is the solution check it.

How to iterate through a variation of an id name using jQuery (such as idname1, idname2) [duplicate]

This question already has answers here:
jQuery or CSS selector to select all IDs that start with some string [duplicate]
(4 answers)
Closed 7 years ago.
I have a column of 10 checkboxes, with an additional checkbox at the top titled "Select All". Each checkbox has a sequential id, like "cbox1", "cbox2", etc. When each of these cboxes are clicked, they make an image become visible which resides within a div next to that checkbox. This div is called "tinybox" and it has an id which is sequential and matches it's respective cbox. So the 4th checkbox has an id of cbox4 and upon clicking, it opens tinybox4.
I'm trying to use jQuery, so that when you click the "Select All" checkbox, it loops through each of the cboxes and uses .show() or .hide() on all the tinybox variants.
The following jQuery runs when a user clicks "Select All" checkbox, and currently only either shows or hides #tinypic1. Instead of just tinypic1, it should loop(?) through tinypic1,2,3,4,... so how do I adapt this code to iterate through tinybox(n) where (n) represents an increasing integer from 1-10:
<script type="text/javascript">
$(document).ready(function() {
$('#selectall').click(function() {
if ($('#selectall').prop('checked')) {
$("#tinypic1").show();
$('.cboxes').each(function() {
this.checked = true;
});
} else {
$("#tinypic1").hide();
$('.cboxes').each(function() {
this.checked = false;
});
}
});
});
</script>
Hopefully I'm being clear. I'm trying to verbalize my concept of the solution as best as possible. Thanks for your time
There are 2 ways you can go about this that are quick.
you can add a loop to your script like the following:
Here is a fiddle of this way Fiddle
$('#selectall').click(function() {
if ($('#selectall').prop('checked')) {
for ( i = 1; i <= 10; i++ ) {
$("#tinypic" + i).show();
$("#cbox" + i).prop("checked", true);
}
} else {
for ( i = 1; i <= 10; i++ ) {
$("#tinypic" + i).hide();
$("#cbox" + i).prop("checked", false);
}
}
});
You can just do a begins with on the id like so: here is a fiddle of this way fiddle
if ($('#selectall').prop('checked')) {
$("[id^='tinypic']").show();
$("[id^='cbox']").prop("checked", true);
} else {
$("[id^='tinypic']").hide();
$("[id^='cbox']").prop("checked", false);
}
$('#selectall').toggle(
function() {
$('.cboxes').each(function(){
$(this).prop('checked', true);
$(this).next().show();
});
},
function() {
$('.cboxes').each(function(){
$(this).prop('checked', false);
$(this).next().hide();
});
}
);
You can select everything that starts with a string in your selector:
function toggleAll(state) {
if (state===true) {
$( "[id^='tinyPic']" ).show();
$( "[id^='cbox']" ).prop('checked', true);
} else {
$( "[id^='tinyPic']" ).hide();
$( "[id^='cbox']" ).prop('checked', false);
}
}
enter code hereMove your line of code $('#tinypic1').show() to the each block and change it to
this.next().show();
And the same idea for the hide part

Check all/uncheck all - checkboxes and tabular data

I am currently using Footables to display tabular data. Each row has a checkbox. There is one master checkbox that selects all. I am running into some difficulties. The table has a filter. When I apply the filter and try to check all checkboxes within that filter it wont work. Also, since I am able to check all checkboxes at once is there away to uncheck all checkboxes? EXAMPLE
Checkbox function
$(document).on('change','input[name="check_all"]',function() {
$("input[type=checkbox]").attr('checked', true);
});
$(document).on('change','select',function() {
$('input[type=checkbox]').attr('checked', false);
});
table filter
$(function () {
$('table').footable().bind({
'footable_filtering': function (e) {
var selected = $('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
},
'footable_filtered': function() {
var count = $('table.demo tbody tr:not(.footable-filtered)').length;
$('.row-count').html(count + ' rows found');
}
});
$('.clear-filter').click(function (e) {
e.preventDefault();
$('.filter-status').val('');
$('table.demo').trigger('footable_clear_filter');
$('.row-count').html('');
});
$('.filter-status').change(function (e) {
e.preventDefault();
$('table.demo').data('footable-filter').filter( $('#filter').val() );
});
});
use .prop() instead of .attr()
Check/uncheck only the visible rows
set the checked status to the select all checkboxes state
Try
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:visible input[type=checkbox]").prop('checked', this.checked);
});
try this one with not selecter which will select except the class .footable -filtered
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
});

Checkbox not working properly

Here is my piece of code in jquery actuall I want in such way where :
Where by default value of Ball will be shown in Textbox.
same time either All or Stopall will be work(it's not working here properly :( )
For multiple times checking All button,which is not working according to the expectation
here is the fiddle link : http://jsfiddle.net/bigzer0/PKRVR/11/
$(document).ready(function() {
$('.check').click(function(){
$("#policyName").val('Start');
$("#features").val('');
$('[name="startall"]').on('click', function() {
var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
if (this.checked) {
$checkboxes.prop({
checked: true,
disabled: true
});
}
else{
$checkboxes.prop({
checked: false
});
}
});
$(".check").each(function(){
if($(this).prop('checked')){
$("#policyName").val($("#policyName").val() + $(this).val());
$("#features").val($("#features").val() + $(this).data('name'));
}
});
});
});
Any comments on this context will be welcome
You're code is broken in many ways. You are binding a click event inside a click event. You should take that outside and just make sure it's inside the document.ready function since your element is a static element.
$(document).ready(function() {
// cache features
var $features = $('#features');
// cache policyname
var $policy = $("#policyName");
// cache all/stopall
var $ss = $('[name="startall"],[name="stopall"]');
// cache all others
var $checkboxes = $('input[type="checkbox"]').not($ss);
// function to update text boxes
function updateText() {
var policyName = 'Start';
var features = '';
// LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
$checkboxes.filter(':checked').each(function(i, v) {
policyName += $(v).val();
features += $(v).data('name');
});
// update textboxes
$policy.val(policyName);
$features.val(features);
}
$checkboxes.on('change', function() {
updateText();
// check startall if all three boxes are checked
$('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
});
$('input[name="startall"]').on('change', function() {
$checkboxes.prop({
'checked': this.checked,
'disabled': false
});
updateText();
});
$('input[name="stopall"]').on('change', function() {
$checkboxes.add('[name="startall"]').prop({
'checked': false,
'disabled': this.checked
});
updateText();
});
// updatetext on page load
updateText();
});​
FIDDLE
you are checking click function in click function. you should use if statement.

Jquery Unable to select and deselect a td on clicking it

I have written 2 jquery functions. Lines 1-11 is the first one which binds mouseover event on mousedown to get the effect of click and drag to select td's(internally checking/unchecking checkboxes).
Second function(12-20) is to click and unclick on single td to check and uncheck a checkbox. I am able to do mousedown and select multiple td's but I am not able to a click and unclick on single td. I am not sure where the problem is ? Any suggestion is appreciated.
Here is the code:
$("#tbl td").mousedown(function() {
$("#tbl td").bind('mouseover', function() {
var checkbox = $(':checkbox', this)[0];
$(this).css({
'background': (checkbox.checked ? 'white' : '#6D7B8D')
});
checkbox.checked = !checkbox.checked;
});
$(this).mouseover();
}).mouseup(function(event) {
$("#td").unbind('mouseover');
event.preventDefault();
event.stopPropagation();
});
$('#tbl td').click(function(e) {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).find('input:checkbox').attr("checked", "");
$(this).css({
background: "white"
});
} else {
$(this).find('input:checkbox').attr("checked", "checked");
$(this).css({
background: "#6D7B8D"
});
}
});​
Thanks
Well, I am not sure if this is what you exactly need but maybe could help.
(Just to know, it will be really helpful if you put the HTML code!)
Live Demo: http://jsfiddle.net/oscarj24/TATg7/
Code:
$('#tbl').on('mousedown, mouseover, mouseup, click', 'td', function(e) {
if(e.type == 'mousedown'){
$(this).mouseover();
} else if(e.type == 'mouseover'){
var checkbox = $('input:checkbox');
$(this).css({'background': (checkbox.is(':checked') ? 'white' : '#6D7B8D')});
checkbox.prop('checked', !checkbox.checked);
} else if(e.type == 'mouseup'){
$(this).unbind('mouseover');
e.preventDefault();
e.stopPropagation();
} else if(e.type == 'click'){
var checked = $('input:checked').is(':checked');
checked ? background = 'white' : background = '#6D7B8D';
$('input:checked').prop('checked', !checked);
$(this).css({background: background});
}
});
​

Categories

Resources