Develop Reference

Select different divs on radio button options

I have three radio buttons by default none of them is selected and a message saying "By selecting option 1 and 2, you reduce risk. Learn more" is displayed by default.
Now if I select option 1, "You are not liable to pay any excess fee." should replace the default text.
If I select option 2 or 3, "You will pay an excess of up to [£700 (for moderate)/1000 (for basic)] per day. Learn more" £700 will load if I chose option 2 and £1000 will load if I chose option 3 by replacing the default text.
Can someone help me how to achieve it?
Regards, Bill
.font-weight-600 {
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Default Message -->
<div>By selecting option 1 and 2, you reduce risk. Learn more</div>
<!-- If I select Premium excess -->
<div>You are not liable to pay any excess fee.</div>
<!-- If I select Moderate excess or Basic excess -->
<div>You will pay an excess of <span class="font-weight-600">up to [£700 (for moderate)/1000 (for basic)]</span> per day. Learn more</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio">
<span class="insurance-plan-text">Premium excess</span>
<span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio">
<span class="insurance-plan-text">Moderate excess</span>
<span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio">
<span class="insurance-plan-text">Basic excess</span>
<span class="float-right"><span class="protection-reduced-price">FREE</span></span>
</label>
</div>
</div>

First, I separated Moderate and Basic excess messages. Then, I added class names to your excess messages. Here is working snippet based on your code:
$('input:radio[name="optradio"]').change(function(){
$('.default-message, .excess-message').hide();
$('.' + $(this).val()).show();
});
.font-weight-600 {
font-weight: 600;
}
.excess-message {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Default Message -->
<div class="default-message">
By selecting option 1 and 2, you reduce risk.
Learn more
</div>
<!-- If I select Premium excess -->
<div class="excess-message premium">You are not liable to pay any excess fee.</div>
<!-- If I select Moderate excess -->
<div class="excess-message moderate">
You will pay an excess of <span class="font-weight-600">up to £700</span> per day.
Learn more
</div>
<!-- If I select Basic excess -->
<div class="excess-message basic">
You will pay an excess of <span class="font-weight-600">up to £1000</span> per day.
Learn more
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio" value="premium">
<span class="insurance-plan-text">Premium excess</span>
<span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio" value="moderate">
<span class="insurance-plan-text">Moderate excess</span>
<span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio" value="basic">
<span class="insurance-plan-text">Basic excess</span>
<span class="float-right"><span class="protection-reduced-price">FREE</span></span>
</label>
</div>
</div>

A simple approach might be to update your HTML markup to add data-option attributes to your radio input elements like so:
<input type="radio" name="optradio" data-option="1">
This allows you to easily determine which radio button is clicked in your script, so that you can decide what message to display to the user. Consider the script and HTML below, where messages are displayed based on their class:
$('.insurance-plan input[type="radio"]').click(function() {
/* Re-hide all messages */
$("[class^='message']").hide();
/* Extract the option number of this radio button */
const option = $(this).data('option');
/* Display only the message that should be shown as per the clicked radio button */
$('.message-' + option).show();
});
.font-weight-600 {
font-weight: 600;
}
/* Message 1, 2 and 3 are hidden by default */
.message-1, .message-2, .message-3 {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Update markup for messages -->
<div class="message-default">By selecting option 1 and 2, you reduce risk. Learn more</div>
<div class="message-1">You are not liable to pay any excess fee.</div>
<div class="message-2">You will pay an excess of <span class="font-weight-600">up to [£700 (for moderate)/1000 (for basic)]</span> per day. Learn more</div>
<div class="message-3">You will pay an excess of <span class="font-weight-600">up to [£1000 (for moderate)/1000 (for basic)]</span> per day. Learn more</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<!-- Add data-message attribute to radio button -->
<input type="radio" name="optradio" data-option="1">
<span class="insurance-plan-text">Premium excess</span>
<span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<!-- Add data-message attribute to radio button -->
<input type="radio" name="optradio" data-option="2">
<span class="insurance-plan-text">Moderate excess</span>
<span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<!-- Add data-message attribute to radio button -->
<input type="radio" name="optradio" data-option="3">
<span class="insurance-plan-text">Basic excess</span>
<span class="float-right"><span class="protection-reduced-price">FREE</span></span>
</label>
</div>
</div>
Hope that helps!

Selecting Checkboxes Based on Value and Parent ID

I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).
Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?
$("input:checkbox[value='See Notes']").attr("checked", true);
This is what my HTML looks like for each item:
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
<!-- Etc... -->

You can do something like:
$('[title="Item 1"]') //Select elemements with attribute title="Item 1"
.next() //Select the next element, which is div with class .data
.find("input:checkbox[value='" + value + "']") //Find checkbox with the value
.prop("checked", true); //Set the prop checked to true
Here is a snippet:
var item = 'Item 1';
var value = 'See Notes';
$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="field tabular">
<span class="item-data">{"Id":"123"}</span>
<div class="field-content">
<div class="title" title="Item 2">Item 2</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>

On Submit display div based on radio button selection

I have multiple inputs on the same page. Based on the selection and once the user press "Submit" I would like to show the relevant divs and hide the ones that are not related to the selection.
I could implement the structure I wanted but can not get the jQuery to display the different values.
Here is my code so far:
(function($) {
$('#quiz_submit').click(function() {
$('#quiz_submit').click(function() {
if ($('input[type="radio"]').attr("id") == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if ($('input[type="radio"]').attr("id") == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else($('input[type="radio"]').attr("id") == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>

You need to add a button with id=quiz_submit in your HTML. You also have typos in the third and final condition.
(function($) {
$('#quiz_submit').click(function() {
let checkedId = $('input[type=radio][name=quiz-selector]:checked').attr('id')
if (checkedId == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if (checkedId == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else if(checkedId == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" value="submit"/>
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>

If your problem is that your jQuery isn't working, it may have to do with the fact that there isn't any way for your code to get run.
First you have a click function inside a click function, take away one of those. Secondly there is no button to for that click handler to even run. I can't see anything particularly wrong with the code, as those were the things that stuck out to me.
Let me know if you are still getting an error after fixing that.

There's no element with the id quiz_submit in your html code.

i just created a code for you. that may be your answer.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<div class="a1" style="display:none">Answerof the questoon - One </div>
<div class="a2" style="display:none">Answerof the questoon - Two </div>
<div class="a3" style="display:none">Answerof the questoon - Three </div>
and jquery
$(document).ready(function(){
$('input[type="radio"]').change(function(){
if($(this).attr("id")=="option-one"){
$(".a1").show();
$(".a2").hide();
$(".a3").hide();
}
if($(this).attr("id")=="option-two"){
$(".a1").hide();
$(".a2").show();
$(".a3").hide();
}
if($(this).attr("id")=="option-three"){
$(".a1").hide();
$(".a2").hide();
$(".a3").show();
}
});
});
and here is working fiddle.
ClickHereForFiddle

Saving app settings in Ionic Framework (AngularJS)

I've got a fairly basic settings page in my Ionic app, and the tab view looks like this:
<ion-view title="Settings">
<ion-content class="has-header">
<ul class="list">
<label class="item item-input item-label">
<span class="input-label">Hours per week</span>
<input type="text" value="37.5">
</label>
<label class="item item-input item-label">
<span class="input-label">Days per week</span>
<input type="text" value="5">
</label>
<label class="item item-input item-label">
<span class="input-label">Pension Contribution</span>
<input type="text">
</label>
<label class="item item-input item-select">
<div class="input-label">
Age
</div>
<select>
<option selected>Under 65</option>
<option>65-74</option>
<option>75+</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Weeks Option
</div>
<select>
<option selected>Weekly</option>
<option>2 Weeks</option>
<option>4 Weeks</option>
</select>
</label>
<li class="item item-toggle">
National Insurance
<label class="toggle toggle-positive">
<input type="checkbox" value="on">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Student Loan
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Registered Blind
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Married
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
</ion-content>
</ion-view>
What I want to do is to save the states of these elements (so if the user enters a different number of days per week or toggles a checkbox on/off or chooses an option from a dropdown list) to the local storage so that the next time the app is initiated, it will load these saved values.
I'm having a hard time finding any good information on how to do this in the Ionic docs and am new to Angular, so would appreciate any help on either a) how to go about this, or b) where I can find the information to learn how to do it.
Cheers!

Yo can inject Angular-local-storage in your controller as your dependency and then can have this code in your controller
$scope.hoursPerWeek = '';
$scope.submitClicked = function(){
localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
}
However first in your html you need to have two way binding with hoursPerWeek object.
<label class="item item-input item-label">
<span class="input-label">Hours per week</span>
<input type="text" ng-model="hoursPerWeek" value="37.5">
</label>
For each field you need to have a similar approach

Use of RegExp to find, copy and paste content of tags

I have a long HTML file where I need to make a relatively simple substitution, which, nevertheless, cannot be achieved by simple find/replace. I was wondering if RegExp could help me do the job.
So, here is the HTML piece:
<div class="panelHeader">
<span class="QN_header">Info1</span>
<span class="QT_header">Info2</span>
</div>
<div id="QXXXX" class="panelContent">
<div class="Question">
<span class="QNumber"></span>
<span class="QText"></span>
</div>
<!-- some more tags here -->
</div>
Thus at the end it should look like:
<div class="panelHeader">
<span class="QN_header">Info1</span>
<span class="QT_header">Info2</span>
</div>
<div id="QXXXX" class="panelContent">
<div class="Question">
<span class="QNumber">Info1</span>
<span class="QText">Info2</span>
</div>
<!-- some more tags here -->
</div>
What I need is:
Copy Info1 from <span class="QN_header">;
Insert it into <span class="QNumber">;
Copy Info2 from <span class="QT_header">;
Insert it into <span class="QText">;
If it is achievable in several iterations - that's ok; much better then copy/pasting it manually throughout the file.
Thanks in advance.
UPDATE:
The whole REPEATABLE piece of the code is below. It then repeats itself.
<div class="panelHeader"> <!-- BEGIN OF PANEL HEADER -->
<span class="QN_header"></span>
<span class="QT_header"></span>
</div> <!-- END OF PANEL HEADER -->
<div id="QXXXX" class="panelContent"> <!-- BEGIN OF CONTENT-->
<div class="Question">
<span class="QNumber"></span>
<span class="QText"></span>
</div>
<div class="Guidance"><p></p></div>
<div class="Response">
<div class="responseControls">
<label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY" onchange='radioChange(this, "XXXX")' />Yes</label>
<label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN" onchange='radioChange(this, "XXXX")' />No</label>
<label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS" onchange='radioChange(this, "XXXX")' />Not Seen</label>
<label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA" onchange='radioChange(this, "XXXX")' />Not Applicable</label>
</div>
<div class="responseDetails">
<div class="Observation">
<label for="ObsXXXX">Observation:</label>
<textarea name="observation" id="ObsXXXX" rows="6" disabled ></textarea></div>
<div class="DueDate">
<label for="DueDateXXXX">Due date:<br /></label>
<input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
</div>
<div class="actions">
<label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
<textarea name="actions" id="paXXXX" rows="6"></textarea>
</div>
</div> <!-- End of ResponseDetails -->
</div> <!-- End of Response -->
</div> <!-- END OF CONTENT -->

If they just are repeating systematically after each other, in a long row - try this :
var panelHeaders = document.querySelectorAll('.panelHeader');
var panelContents = document.querySelectorAll('.panelContent');
for (var i=0;i<panelHeaders.length;i++) {
panelContents[i].querySelector('.QNumber').innerHTML = panelHeaders[i].querySelector('.QN_header').innerHTML;
panelContents[i].querySelector('.QText').innerHTML = panelHeaders[i].querySelector('.QT_header').innerHTML;
}
fiddle -> http://jsfiddle.net/8su4y/

Using something like jQuery probably makes more sense than regular expressions. You could copy the values in your example with:
$('.panelHeader').each(function() {
var header = $(this);
var qn = header.find('.QN_header').text();
var qt = header.find('.QT_header').text();
var content = header.next('.panelContent');
content.find('.QNumber').text(qn);
content.find('.QText').text(qt);
});
JSFiddle example