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!

JQuery Checkbox validation one

I have following html and jquery code segments to validate at least one check box. I am new for jQuery so I can not validate this two check boxes. Please help me. Thank you
<div class="row">
<div class="form-horizontal">
<label class="col-sm-5 control-label input-sm">Payement Type</label>
<div class="col-sm-5">
<span id="errfnBC9" style="color:red;font-size:8pt"></span>
<input type="checkbox" name="cashactive" id="activecash" value="Cash" checked style="font-weight: bold;font-size: 11px;"> Cash
<input type="checkbox" name="creditactive" id="activecredits" value="Credit" style="font-weight: bold;font-size: 11px;"> Credit<br>
</div>
</div>
</div>
if ($('#activecash').find('input[type=checkbox]:checked').length == 0) {
document.getElementById('errfnBC9').style.display = "block";
document.getElementById('errfnBC9').innerHTML = "**Please select at least one checkbox";
return false;
}

use only with javascript or jquery .Apply with onchange event it will validate each time of the box checking.
$(document).ready(function (){
$('input[type=checkbox]').on('change',function (){
if ($('input[type=checkbox]:checked').length == 0) {
$('#errfnBC9').html( "**Please select atleast one checkbox");
}
else{
$('#errfnBC9').html( "");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-5 control-label input-sm">Payement Type</label>
<div class="col-sm-5">
<span id="errfnBC9" style="color:red;font-size:8pt"></span><br>
<input type="checkbox" name="cashactive" id="activecash" value="Cash" checked style="font-weight: bold;font-size: 11px;"> Cash
<input type="checkbox" name="creditactive" id="activecredits" value="Credit" style="font-weight: bold;font-size: 11px;"> Credit<br>
</div>
</div>
</div>

You have to add an event listener to see when the state of the checkboxes is changing:
$(".validate").on("change", function(e) {
if($("input.validate:checked").length == 0) {
$("#error").html("You must select one.");
} else {
$("#error").html("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cash" class="validate" checked /><label for="cash">Cash</label>
<input type="checkbox" id="credit" class="validate" /><label for="credit">Credit</label>
<p id="error"></p>

If Child Category checkbox Selected Then Parent checkbox Should be selected Automatically

I have nested Loop For Parent And Child Category,
Now I want If My Child Is selected Then All Parent Of that Child Category Should Be Selected Automatically.
In My code Only One Parent is checked , So how can i do it.
And also If i Uncheck Child Then, Parent Should Be uncheck Automatically
So is that possible.
Thanks in advance.
Here Is My code,
<label>Product Category:</label>
<div class="wk_field wk_category">
<div class="wk_for_validation">
<div id="wk_category_label">CATEGORIES</div>
<div class="wk_cat_container" style="margin-left:0px;">
<span class="wk_minus"> </span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gold</span>
<input class="wk_elements" type="checkbox" value="3" name="category[]" id="3">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Earrings</span>
<input class="wk_elements" type="checkbox" value="27" name="category[]" onclick="checkParent('3', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_minusend"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Rings</span>
<input class="wk_elements" type="checkbox" value="26" name="category[]" onclick="checkParent('3', this)" id="26">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;" >
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Ladies</span>
<input class="wk_elements" type="checkbox" value="37" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gents</span>
<input class="wk_elements" type="checkbox" value="36" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Bangles</span>
<input class="wk_elements" type="checkbox" value="25" name="category[]" onclick="checkParent('3', this)">
</div>
<script type="text/javascript">
function checkParent(id, ele) {
var parent = document.getElementById(id);
if (ele.checked === true) parent.checked = true;
}
</script>

if I got it right when a child is checked you wanted its parent to be checked, and its parent's parent, and so on till root.
If so, check this fiddle I created.
I removed inline event handlers (onclick), associated a data-parent attribute to each child, and used the attribute to go up the tree in the following reviewed checkParent function:
function checkParent(ele) {
var idparent = ele.getAttribute('data-parent');
if(idparent){
var parent = document.getElementById(idparent);
if (ele.checked === true) parent.checked = true;
checkParent(parent);
}
}
Also, I didn't understand how exactly you wanted child uncheck event to work, you can try and play with jsfiddle to get that, or point it out more clearly to have further help.

Disable radio button using Closest in JQuery

How to disable radio button on both sides on clicking of radio button in center using Closest?
<div class="pure-u-1 pure-u-md-1-5">
<span style="white-space: nowrap;">
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" value="Yes" name="COM" id="COM0">
Yes
</p>
</label>
</span>
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" checked="checked" value="No" name="COM" id="COM1">
No
</p>
</label>
</span>
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" value="NA" name="COM" id="COM2">
NA
</p>
</label>
</span>
</span>
</div>
On Click of No, i want to disable YES and NA radio button, but not by using any looping/iterations or disabling on static Name or ID,
but want Jquery methods closest or siblings to do the same.
How is this possible in JQuery using it?

Try this
DEMO HERE
$('input[type=radio]').on('click',function(){
$("input:radio").attr('disabled',true);
$(this).removeAttr('disabled');
});
or just with a single line
DEMO
$('input[type=radio]').on('click',function(){
$("input:radio").not($(this)).attr('disabled',true);
});

You can do it like this, basically you take the closest <div> and then find all <input> of type radio but the "No" radio and disable them.
$("#COM1").on("click", function() {
var $no = $(this);
$no.closest("div").find("input:radio").not($no).attr("disabled", true);
});
See this http://jsfiddle.net/4459rqtp/

finding last child div in nested fieldset

Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks

function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).

Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/

I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.