CSS class toggle with jquery on different id's - javascript

I'm trying to write some Jquery code for toggling two different class on different ids.
Since the CMS strips out inline css, I need to find a solution for "display:none"
I have written two css classes, in hopes of toggling between them, but not really sure if this is the direction to go .
I'm very new to Stack and Jquery so any info or corrections are welcomed
Here is the code:
CSS
.displaynone{
display:none;
}
.displayblock{
display:block;
}
HTML & JAVASCRIPT
<form>
<input onclick="javascript:resetForm();document.forms[0].reset();" type="reset" value="Reset" /> 
<br />
<br />
<h4>Are you number 1?</h4>
<label>
<input name="one" onclick="unhide('hidden-input', this, 'hidden-input2')" type="radio" value="1" /> Yes
<br />
</label>
<label>
<input name="one" onclick="unhide('hidden-input2', this, 'hidden-input')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input2" style="display: none;">
<p>If you are not , please download:
<br />
<a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div id="hidden-input" style="display: none;">
<hr />
<h4>Were you selected for too many hours?</h4>
<label>
<input name="hours" onclick="unhide('hidden-input3', this, 'hidden-input4')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input3" style="display: none;">
<p>If you were selected for too many hours, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Hours</span>
</a>
</p>
</div>
<label>
<input name="hours" onclick="unhide('hidden-input4', this, 'hidden-input3')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input4" style="display: none;">
<hr />
<h4>Were you selected for number 3?</h4>
<label>
<input name="gpa" onclick="unhide('hidden-input5', this, 'hidden-input6')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input5" style="display: none;">
<p>If you were selected for number 3, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for Three </span>
</a>
</p>
</div>
<label>
<input name="gpa" onclick="unhide('hidden-input6', this, 'hidden-input5')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input6" style="display: none;">
<p>Were you selected for 4 :
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for 4</span>
</a>
</p>
</div>
</div>
</div>undefined
</form>

change your element to default as display:block and define a class
.hidden{
display:none;
}
and use this to toggle that class on/off
$('#YOURID').toggleClass("hidden")

Easier to just have the hidden class and remove it when you want to show the element. That way you don't have to worry about altering inline, block and table display properties.
// hide the thing
$('.thing').addClass('displaynone');
// show the thing
$('.thing').removeClass('displaynone');

demo: http://jsfiddle.net/swm53ran/401/ something like this? i started recreating the logic, but i didnt finish it. you should get a gist of what's going, and if you have any questions on it, let me know.
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
var name = $(this).attr('name');
var value = $(this).val();
console.log(name, value);
if (name == 'one') { // if number 1 question
if (value == 2) {
$('#hidden-input2').show(); // if no, show the download text
}
else {
$('#hidden-input2').hide(); // if yes, hide the dl text
}
$('#hidden-input').show(); // always show the hours question
}
if (name == 'hours') { // if hours question
if (value == 2) {
$('#hidden-input4').show() // if no, show number 3 question
}
else {
$('#hidden-input4').hide() // if no, hide number 3 question
}
}
});
});

It's generally advisable to avoid targeting IDs, and instead use common classes inside grouping wrappers.
<div>
<label>
<input name="one" class="selector yes" type="radio" value="1" />Yes
<br />
</label>
<label>
<input name="one" class="selector no" type="radio" value="2" />No
<br />
</label>
<div class="followup yes hidden">
<p>If you are not , please download:
<br /> <a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div class="followup no hidden">
<hr />
<h4>Were you selected for too many hours?</h4>
</div>
</div>
$('.selector').click(function () {
$(this).closest('label').siblings('.followup').hide();
if ($(this).is('.yes')) {
$(this).closest('label').siblings('.followup.yes').show();
} else {
$(this).closest('label').siblings('.followup.no').show();
}
});
Demo
This single function is reusable for any number of groupings having the same structure, even if nested.
Nested demo

Related

How to detect event checked radio input in ajax load form

i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});

How do I show a DIV id based on three inputs?

I am fairly new to javascript and wish to ask for some guidance.
I am trying to make a function that shows a Div id based on three inputs:
Diet type
Number of calories
Number of meals
Thanks.
<div class="dietSelector">
<div class="diet">
<div class="header">
<h2>Diet</h2>
</div>
<li class=nav-item>
<input type="radio" onclick="create()" id="anything">Anything
</li>
<li class=nav-item>
<input type="radio"id="keto">Keto
</li>
<li class=nav-item>
<input type="radio" id="vegetarian">Vegetarian
</li>
<form class="form" id="form-control">
<label>Calories:
</label>
<input type="number" id="calories" min="500" max="5000">
<br><br>
<label>
Meals:
</label>
<input type="number" placeholder="2" id="meals" min="1" max="5">
<button onClick="create" value="create">Create</button>
<br><br>
</form>
</div>
</div>
There were a few changes required in your code, kindly check the updated code in the below snippet.
I guess, this is your desired output. Let me know if you require further assistance.
function generateMeal(event) {
event.preventDefault();
debugger;
const calories = Number(document.getElementById("calories").value);
const meals = Number(document.getElementById("meals").value);
const anythingPlan3 = document.getElementById("anythingPlan3");
anythingPlan3.style.display = "none";
if (
document.getElementById("anything").checked &&
calories > 1500 &&
calories < 2000 &&
meals == 4
) {
anythingPlan3.style.display = "block";
} else {
anythingPlan3.style.display = "none";
}
}
<div class="dietSelector">
<div class="dietContainer">
<div class="header">
<h2>Please choose your diet</h2>
</div>
<li class="nav-item">
<input
type="radio"
name="diets"
id="anything"
/>Anything
<img src="images/meat.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="keto" />Keto
<img src="images/keto.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="vegetarian" />Vegetarian
<img src="images/vegetarian.png" class="diets" />
</li>
<form class="diet" onsubmit="generateMeal(event)" id="dietForm">
<label
>Please enter the number of calories you wish to eat in a day:
</label>
<input
type="number"
placeholder="1800"
id="calories"
min="1000"
max="2500"
/>
<br /><br />
<label> How many meals you would like to eat: </label>
<input type="number" placeholder="4" id="meals" min="3" max="4" />
<button type="submit" value="Generate">Generate</button>
</form>
</div>
</div>
<!-- Div container for Anything Plan, 3 meals. 1500-2500 Calories-->
<div id="anythingPlan3" style="display: none;">
<h2>
Your delicious, personalised 3-meal plan of 'Anything' in a 1500-2000
calorie range:
</h2>
<h3 class="headings">Breakfast</h3>
<img src="images/oatmeal.jpg" class="mealImage" />
<span class="calories"> 628 Calories </span>
<br />
<a
class="recipes"
href="https://www.runningtothekitchen.com/strawberry-oatmeal/"
>
Strawberry Oatmeal</a
>
<br />
<span class="serving">2 Bowls</span>
<h3 class="headings">Lunch</h3>
<img src="images/drumsticks.jpg" class="mealImage" />
<span class="calories"> 504 Calories </span>
<br />
<a
class="recipes"
href="https://www.taste.com.au/recipes/smoky-bbq-drumsticks-carrot-noodle-salad/RUmTZzJv?r=healthy/qnLBa1zE"
>
Smokey Bbq Drumsticks and Carrot Noodle Salad</a
>
<br />
<span class="serving">1 serving</span>
<h3 class="headings">Dinner</h3>
<img src="images/meatballs.jpg" class="mealImage" />
<span class="calories"> 628 Calories</span>
<br />
<a
class="recipes"
href="https://www.bbcgoodfood.com/recipes/chicken-meatballs-quinoa-curried-cauliflower"
>
Chicken Meatballs with Quinoa & Curried cauliflower></a
>
<br />
<span class="serving">1 serving</span>
</div>
You need to dynamically set conditions and render the divs. That's the cleanest way I can recommend.
const divArr = [
{
id: "anythingPlan2",
calorieLow: 1000,
calorieHigh: 2000
},
{
id: "anythingPlan3",
calorieLow: 2000,
calorieHigh: 3000
},
];
Fiddle: https://jsfiddle.net/h6es573m/

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>

How to select and deselect multiple check box with a button click in javascript

In my project, i have multiple check box (total 27).I am trying to select all the check box with a single button click and i am able to do it.But i want to deselect the same check box with the same button click.So the button should act like a selector and a de-selector.I can not use a check box instead of the button.
My html code is:
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
In js:
$(self.element).on('click', '.selectAllcountry', function(e) {
debugger;
$('.chkCountry').trigger('click')
e.stopPropagation();
});
Using trigger will always toggle the state, so if some elements are checked and some aren't then it won't work fine.
Instead you can try something like
$(document).on('click', '.selectAllcountry', function(e) {
var $checks = $('.chkCountry');
$checks.prop('checked', !$checks.is(':checked'))
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
Try this
$('.selectAllcountry').on('click', function(){
if ($('.selectAllcountry').is(':checked')) {
$('.chkCountry').find(':checkbox').prop('checked', true);
} else {
$('.chkCountry').find(':checkbox').prop('checked', false);
}
});
try this....
$(document).on('click', 'input.selectAllcountry', function(e) {
if ($('input.selectAllcountry').is(':checked'))
{
$('.chkCountry').prop('checked',true);
}
else
$('.chkCountry').prop('checked',false);
});
var chkStatus = true;
$('.selectAllcountry').click(function() {
$('.countryAll').find(':checkbox').prop('checked', chkStatus);
chkStatus = !chkStatus;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
<br>
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
</div>
as you have done the portion of selection, now focus on Deselecting.
to remove all checkbox inputs at once
$('input:checkbox').removeAttr('checked');
or you can add class as identifier and then remove checked element on the basis of class.
for exa.
$('.chkCountry').removeAttr('checked');
I think you have made one mistake in your code you have used class attribute twise in html tag.I think that's why it take first class attribute and other are ignored.
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
please combine all class in single class attribute.
I think it will be helpful.

Unknown element in JQUery click

I am having a Html generated using JQUery and its like
<p class="fieldChoices title" style="">
Choices:
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice1 cutsom_button deleteField"></p>
<div class="seperator"/>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice2 cutsom_button deleteField"></p>
<div class="seperator"/>
</p>
I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..
Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,,
so i dont know how to resolve it using JQuery..please suggest me....
$(".deleteField").click(function(){
$(this).prevAll("input:first").remove();
$(this).prevAll(".seperator").remove();
$(this).remove();
});
Though it'd be easier if you put each choice in a div.
Try the following instead:
<p class="fieldChoices title" style="">
Choices:
<fieldset>
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
<fieldset>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
</p>
$("deleteField").bind("click", function(){
$(this).parent().remove();
}
html:
<fieldset class="fieldChoices title">
<legend>Choices</legend>
<ul>
<li>
<input id="Choice1" value="option1" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
<li>
<input id="Choice2" value="option2" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
</ul>
</fieldset>
jquery:
$(".fieldChoices li").each(function() {
var choice = $(this);
$(".deleteChoice", this).click(function() {
choice.remove();
});
});

Categories