Develop Reference

How to show a message when a button is clicked

I want to show the following message when the button below is clicked using jQuery
<p class="msg-confirm" id="msgConf">
Great! You got this. Let's continue.
</p>
Button:
<input type="button" value="Start" class="btn-start" id="exec">
This message is set as none in CSS:
.msg-confirm{
display: none;
}
I have this function that worked before on a similar context, but without the validation. If the checkbox below is checked, I want this function working.
$("#exec").click(function(){
if($('#d3').is(':checked')){
$("#msgConf").show('slow');
}
});
Checkbox:
<input type="radio" name="image" id="d3" class="input-step1 aheadF1"/>

Let's make use of the simplicity of some of the new features of jQuery such as the .prop() method that will allow us to verify if a checkbox or radio button is checked. For the purpose of this example, I switched the input to a checkbox since it is more appropriate UX/UI wise speaking, however, this property can be verified in both controls. We will use the toggleClass() method of jQuery to toggle the class that hides the P tag and its content initially. I certainly hope this helps.
Happy coding!
$(document).ready(function () {
$("#exec").click(function () {
if ($('#d3').prop('checked')) {
$("p").toggleClass("msg-confirm");
} else {
alert("Please select the checkbox to display info.");
}
});
});
.msg-confirm {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p class="msg-confirm">
Great! You got this. Let's continue.
</p>
<input type="button" value="Start" class="btn-start" id="exec">
<input type="checkbox" name="image" id="d3" class="input-step1 aheadF1"/>

Try this
$("#exec").on("click",function (){
if($('#d3').is(':checked')){
$("#msgConf").css("display","")
}
})

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>

Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>

Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});

Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

how to show same div with different heading by checkbox hide/show

I want to display the same div with different heading by checkbox hide/show.
$('#cbxShowHide').click(function() {
this.checked ? $('#block').show(1000) : $('#block').hide(1000);
});
#block {
display: none;
background: #eef;
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide" />
<label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1" />
<label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2" />
<label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>
in the above example on clicking on checkbox "Show/Hide"I am able to display the text "Some text here".
I want to do this for nth checkbox so that I can show "some text here" nth time like "some text here1", "some text here2"

refer the this jsfiddle. I have moved the content inside div in span
$('#cbxShowHide1').click(function(){
$('#block span').text("yyour new text for this div")
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
Hope this helps

You are getting the click event only for a specific ID "cbxShowHide"
I changed it so the event would be from all input which ever is clicked
$('[type~=checkbox]').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('[type~=checkbox]').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block">Some text here</div>

First thing is that you need to use a class instead of an ID, then it will do that function for each individual checkbox,
Secondly remember that a for tag is specific to an ID so if you link an label to a checkbox make sure the two match.
Hope this example helps
$('.checkbox').click(function(){
if($(this).attr('id') == 'cbxShowHide')
{
$('#block').text('Some text here')
}
if($(this).attr('id') == 'cbxShowHide1')
{
$('#block').text('Some text here1')
}
if($(this).attr('id') == 'cbxShowHide2')
{
$('#block').text('Some text here2')
}
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" class='checkbox' id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" class='checkbox' id="cbxShowHide1"/><label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" class='checkbox' id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>

Not so elegant, but i don't have much time..i hope i got what you meant
CSS
#block, #block1, #block2 {display:none;background:#eef;padding:10px;text-align:center;}
HTML
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block"><span>Some text here</span></div>
<div id="block1"><span>Some text here 1</span></div>
<div id="block2"><span>Some text here 2</span></div>
JS
$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('#cbxShowHide1').click(function(){
this.checked?$('#block1').show(1000):$('#block1').hide(1000);
});
$('#cbxShowHide2').click(function(){
this.checked?$('#block2').show(1000):$('#block2').hide(1000);
});

Try this Jsfiddle :jsfiddle.net/xs523nw8/6/
$("input[type='checkbox']").click(function(){
if($(this).is(":checked")){
$(this).siblings("input[type='checkbox']").removeAttr("checked");
$("#block").text('Some Text Here :'+$(this).index());
$("#block").show(1000)
}
else{
$("#block").hide(1000);
}
});

Check this fiddle https://jsfiddle.net/tz5ror3s/
I have added a class in checkboxes and bind click event on them and printing text inside block span.
$('.cbxShowHide').click(function() {
$('#block span').text('Some text here ' + $(".cbxShowHide:checked").length );
$('#block').show();
});

1. Toggling element's text
fiddle
Case: you want to just toggle the #block element text.
Fiddle uses type='radio' inputs rather than type='checkbox', as you have only one place where you toggle text, so selecting only one option at the time is better way to do it.
2. Showing elements based on checked checkboxes
fiddle
Case: you want multiple boxes hidden/shown based on checkbox input state(checked/unchecked).
On every state change, it loops through the checkboxes and:
For every checked one, it selects box with the same number and shows it
For every unchecked one, it select box with the same number and hides it

Update HTML H4 tag using jQuery

I am having trouble changing the "text" between an HTML tag using jQuery. When someone clicks on a "radio button", the text should be updated in a certain HTML element. Here is my HTML:
<div class="radio-line" id="radio-manager">
<input type="radio" id="rad-400" name="radio-manager" value="No" />
</div>
HTML to be updated on radio check:
<h4 class="manager">Manager</h4>
When someone clicks on the radio above, the "Manager" text should become "Employees". I tried some jQuery code but cannot quite figure it out.

Check out the following fiddle.
http://jsfiddle.net/JBjXN/
<div class="radio-line" id="radio-manager">
<input type="radio" id="rad-400" name="radio-manager" value="No" data-text="Employees" />
</div>
<h4 class="manager">Manager</h4>
$('.radio-line').on('click', 'input[type="radio"]', changeText);
function changeText(e) {
$('.manager').text($(e.currentTarget).data('text'));
}​

All you need to do is this -
$('input[name="radio-manager"]').change(function() {
if($('#rad-400').is(':checked')){
$('h4.manager').text('Employees');
} else {
$('h4.manager').text('Manager');
}
});
See http://jsfiddle.net/Eub9Y/

From my comment above:
$("h4.manager").text("Employees");
should work.

Does this work?
$("#rad-400").on("click", function () {
$(".manager").text("Employees");
});

This should work for you:
$("#rad-r00").click(function() {
if ($('input:radio[name=radio-manager]:checked').val() == "Yes") {
$(".manager").html('Manager')
}
else {
$(".manager").html('Not - Manager');
}
});

How to grey out checkbox unless radio button is selected?

very new to javascript, but any help to get me started would be appreciated. I have a simple form:
<div><input type="radio" name="o1" id="burger" />Burger</div>
<div id="yesFries"><input type="checkbox" name="e1" id="fries" />Fries with that?</div>
<div><input type="radio" name="o1" id="pizza" />Pizza</div>
<div><input type="radio" name="o1" id="hotdog" />Hot Dog</div>
I want the "Fries" checkbox greyed out unless the "Burger" radio button is selected. I'm not sure if Javascript or CSS is the best way to do it. Thanks in advance!

what you want to do is set the elements disabled, until the state of the radio changes, that'd be done with javascript, and then you'd add/remove the disabled class in the onchange of the radio button.
What javascript libraries are you considering using? jQuery would make this fairly simple.
$('#burger').change( function () {
if ($('#burger').checked() ) {
$('#fries').removeClass('disabled');
} else {
$('#fries').addClass('disabled');
}
});

Actually with a bit CSS3 you can mock up a very simplistic solution.
Here we don't gray the button out, but you make it visible just if the checkbox is checked.
But, we could also gray it out with a bit more of CSS on top of this example.
You will always have to consider what kind of support you want to offer.
But if you are fine with it working on modern browsers, just give it a go.
Here's the HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Here's the CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
And here's the DEMO http://jsfiddle.net/DyjmM/

I've noticed that you don't specify whether or not you can use jQuery. If that's an option, please see one of the other posts as I highly recommend it.
If you cannot use jquery then try the following:
<script>
function setFries(){
var el = document.getElementById("burger");
if(el.checked)
document.getElementById("fries").disabled = false;
else
document.getElementById("fries").disabled = true;
}
</script>
<div><input type="radio" name="o1" id="burger" onchange="setFries();"/>Burger</div>
<div id="yesFries"><input type="checkbox" name="e1" id="fries" disabled="disabled"/>Fries with that?</div>
<div><input type="radio" name="o1" id="pizza" onchange="setFries();"/>Pizza</div>
<div><input type="radio" name="o1" id="hotdog" onchange="setFries();"/>Hot Dog</div>​
Simple example on jsFiddle

If you're using jQuery, a really-easy-to-use Javascript library (that I would highly recommend for beginners), you can do this in two steps by adding some code to a script tag in your page containing:
$(function(){
$("#burger").change(function() {
if ($(this).is(':checked')) $("#fries").removeAttr("disabled");
else $("#fries").attr("disabled", true);
});
});
This code does three things:
Listens for change events on #burger.
When a change occurs, execute the provided function.
In that function, set the disabled attribute of #fries to the checked property of #burger.

use JQuery
$().ready(function() {
var toggleAskForFries = function() {
if($('#burger').is(':checked')) {
$('#yesFries').show()
else
$('#yesFries').hide()
}
return false
}
toggleAskForFries()
$('#burger').change(toggleAskForFries)
}

Using jQuery: http://jsfiddle.net/kboucher/cMcP5/ (Also added labels to your labels)

You nay try this without any function library
<input type="checkbox" name="e1" id="fries" disabled />
JS
window.onload=function(){
var radios=document.getElementsByName('o1');
for(i=0;i<radios.length;i++) radios[i].onclick=checkFire;
};
function checkFire(e)
{
var fires=document.getElementById('fries');
var evt=e||window.event;
var target=evt.target||evt.srcElement;
if(target.checked && target.id==='burger') fires.disabled=false;
else
{
fires.checked=false;
fires.disabled=true;
}
}
DEMO.