Change the class of paragraph when radio button is clicked - javascript

I have been using the following code to change the color of <p> depending upon the radio button checked.
I have been using two classes red and blue,
but its not working.
So kindly help me out.
<html>
<head>
<script type="text/javascript">
var ele = document.getElementsByName('color');
if (ele[0].checked) { //index has to be j.
$("p").toggleClass("blue");
}
else {
$("p").toggleClass("red");
}
</script>
<style type="text/css">
.blue
{
color:blue;
}
.red
{
color:red;
}
</style>
</head>
<body>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>

As such, your javascript will be executed before your elements even exist in the DOM. You should put your javascript code at the very end of the body, or include it in an event handler triggered when your document is loaded.
The HTML :
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p id="myParagraph">When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
In Vanilla JS :
document.addEventListener('DOMContentLoaded', function() {
var radioButtons = document.getElementsByName('color');
var paragraph = document.getElementById('myParagraph');
for(var i=0;i< radioButtons.length;i++)
{
var elem = radioButtons[i];
elem.addEventListener('change',function(e){
console.log(paragraph);
if(paragraph.className)
paragraph.className = this.value;
else
paragraph.classList.add(this.value);
}
,false);
}
});
Fiddle of this
Or, if you use jQuery and correctly include it in your page (which is not the case in your example) :
$('document').ready(function() {
$('input:radio').on('change',function(){
$('#myParagraph').addClass(this.value);
});
});
Fiddle of this

Related

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,
try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>
Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.
My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.
Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script type="text/javascript">
$(document).ready(function() {
//set initial state.
$('#checkbox').val($(this).is(':unchecked'));
$('#checkbox').change(function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
document.myForm.appendChild(box);
hasBox = true;
}
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>
</body>
</html>
You can also do this with CSS:
.secondary-checkboxes
{
display: none;
}
.primary-checkbox:checked ~ .secondary-checkboxes
{
display: initial;
}
<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
<input type="checkbox"> Secondary checkbox 1
<br>
<input type="checkbox"> Secondary checkbox 2
<br>
<input type="checkbox"> Secondary checkbox 3
<br>
</div>
Source: this Stack Overflow question
Your on the right track.
You have a few problems in your code.
1) You forgot to enclose your new checkbox tag within quotation marks.
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
should be:
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
Also note the change from type "chkbox" to "checkbox"
2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:
$('#checkbox').prop('checked', false);
rather than your code of:
$('#checkbox').val($(this).is(':unchecked'));
3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:
$("#myForm").append(box);
and give the form element an id of "myForm"
Please find below my full code which works to your requirements:
$(document).ready(function() {
//set initial state.
$('#checkbox').prop('checked', false);
$('#checkbox').on('click', function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
$("#myForm").append(box);
hasBox = true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
<input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>
Hope that you found this useful.

jQuery radio button value when it is hovered

I have 10 radio button/buttonset from jQuery. Of course every button has its own value, and I want to show the value beside the button, when the button is hovered.
How can I deal with it?
Illustration:
row1 : radio1.1 radio1.2 radio1.3 print value radio in here when
radio is hovered
row2 : radio2.1 radio2.2 radio2.3 print value radio in here when
radio is hovered
row3 : radio3.1 radio3.2 radio3.3 print value radio in here when
radio is hovered
I have used live function from jQuery to get event mouseover, but how can I specific place the value into specific row?
How can I get which radio is hovered, so I can get its value?
<!DOCTYPE html>
<html>
<head>
<link href="jslib/jquery_theme/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
<script src="jslib/jquery-1.7.1.min.js"></script>
<script src="jslib/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".ter").buttonset();
});
$('.ter > label').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('mydiv').innerHTML = "Hello World";
//this is when radio is hovered, it should show radio value beside the rwadio
} else {
document.getElementById('mydiv').innerHTML = "out";
//this is when mouse is out from radio
}
});
$(function() {
$("#radio :radio").change(function(e) {
alert(
"run ok"
);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="radio">
<form name='tes' method='post' action='a.php'>
<?php for($I=0;$I<10;$I++){
echo"
<div class='ter' style='border:1px solid; width:400px; margin-bottom:5px;'>
<input type='radio' id='radio1.$I' name='radio.$I' value='4' /><label for='radio1.$I'> </label>
<input type='radio' id='radio2.$I' name='radio.$I' checked='checked' value='3' /><label for='radio2.$I'> </label>
<input type='radio' id='radio3.$I' name='radio.$I' value='2' /><label for='radio3.$I'> </label>
<input type='radio' id='radio4.$I' name='radio.$I' value='1'/><label for='radio4.$I'> </label>
<span id='mydiv'>aaaaaaaaaa</span>
</div> ";
} ?>
<div class='ter'>
<input type='submit' value ='submit'>
</div>
</form>
</div>
</body>
</html>
as i understand from your words, the event will be at the radio buttons
$('input[type=radio]').live({
mouseover:function(){
var value = $(this).attr('value');
$(this).next().html(value);
},
mouseout:function(){
$(this).next().html("");
}
});
when the radio button is hovered, then get it's value and print it in the label(next).
$('.ter > label').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('mydiv').innerHTML = $("#"+$(this).attr("for")).val();
//this is when radio is hovered, it should show radio value beside the rwadio
} else {
document.getElementById('mydiv').innerHTML = "";
//this is when mouse is out from radio
}
This will put the radio value corresponding to the label, and now you can position the div accordingly.
You can achieve this effect without javascript, using only HTML and CSS:
HTML
​<form>
<label><input type="radio" name="Test" value="Something"/></label>
<label><input type="radio" name="Test" value="Something else"/></label>
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS
input:hover:after,
input:focus:after {
content: attr(value);
padding-left: 2em;
}​
This takes advantage of the CSS content property to extract and display the values of elements it's applied to. You might need to work with the CSS to style it how you want - I'm thinking absolute positioning, relative to each row.
This won't work in older versions of IE. 8+ will definitely work - I'm not sure about 7 and below.

Radio button and textbox

I am javascript learner and have been trying to do this
two radio buttons but1 but2
two text boxes box1 box2
What I need to do is
when but1 is selected, box1 should be editable and box2 should be readonly.
when but2 is selected, box2 should be editable and box1 should be readonly.
On page load both the text boxes should be readonly.
My code is as below
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked = true) {
document.getElementById('box2').readonly = true;
}
else if (document.getElementById('but2').checked = true) {
document.getElementById("box1").readonly = true;
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
I do not want to disable the textboxes but make them readonly, so that on form submit i will have the textbox values that i can send to the server.
I do not know what mistake im doing here. Any help will be greatly appreciated. Thanks
You need to set the "readonly" attibute like this:
document.getElementById('box2').setAttribute('readonly','readonly')
and clear it like thisL
document.getElementById('box2').setAttribute('readonly','')
hope, this code would be of any help.
here is my try:
http://jsfiddle.net/ylokesh/AAAVp/1/
You're making a couple of mistakes.
First of all, your css and javascript code must be included into the <head> tag, which should be placed soon after <html>, before <body>.
Secondly your if statements are incorrect: with just one = sign you assign a value to a variable, you have to use two (or in this case three) of them to check the variables against a value, like this: if (something == value).
Lastly, you'd better use the functions setAttribute() and removeAttribute() to modify the values of the readonly attribute.
The complete code would be:
<html>
<head>
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked === true) {
document.getElementById('box2').setAttribute('readonly','readonly');
document.getElementById('box1').removeAttribute('readonly','');
}
else if (document.getElementById('but2').checked === true) {
document.getElementById('box1').setAttribute('readonly','readonly');
document.getElementById('box2').removeAttribute('readonly','');
}
}
</script>
</head>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
Basically, you're using = instead of == on your conditionals. Also, you always have to set readonly to false on the one of the boxes, or you'll end up with two readonly boxes after two clicks. Try this:
EDIT the attribute name is readOnly, not readonly. Code also edited to manipulate the attribute directly, instead of using setAttribute. See working version on jsfiddle:
function makeChoice() {
document.getElementById('box1').readOnly = document.getElementById('but2').checked
document.getElementById('box2').readOnly = document.getElementById('but1').checked
}
In your IF statements, you are setting a variable, not testing whether it is in one state or another. You need to use this:
if (document.getElementById('but1').checked == true) {
Note that there are two equals signs. This checks whether the two are the same. Basically, one equals sets, two equals compares. Of course change both IF statements to the two equals signs.
Also, you say that onload both should be readonly. To do this, add
readonly="readonly"
to the textboxes. And furthermore, you need to turn readonly off on the appropriate textbox when a radio button is clicked.
So, altogether:
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked) {
document.getElementById('box2').setAttribute('readOnly','readonly');
document.getElementById('box1').removeAttribute('readOnly','');
} else if (document.getElementById('but2').checked) {
document.getElementById('box1').setAttribute('readOnly','readonly');
document.getElementById('box2').removeAttribute('readOnly','');
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde" readonly="readonly">
<input type="text" id="box2" value="pqrst" readonly="readonly">
</table>
</body>
<html>

hiding div based on unchecking checkboxes

I have multiple checkboxes in a form. Based on clicking those checkboxes, I show a div section. But if I uncheck even one checkbox, that div section gets hidden. How do I make sure that div section is hidden only if all checkboxes are unchecked. Crude way can be to write my own 'display' method which will check if all checkboxes are unchecked and then hide the div section. Any easier solution??
HTML:
<input type="checkbox" class="group" name="check1">
<input type="checkbox" class="group" name="check2">
<input type="checkbox" class="group" name="check3">
<input type="checkbox" class="group" name="check4">
jQuery:
$(function() {
var $checks = $('input:checkbox.group');
$checks.click(function() {
if($checks.filter(':checked').length == 0) {
$('#div').hide();
} else {
$('#div').show();
}
});
});
The following code will show the div if one or more checkboxes has been checked:
jQuery
Version 1:
$("input[name='mycheckboxes']").change(function() {
$("#showme").toggle($("input[name='mycheckboxes']:checked").length>0);
});
Version 2 (more efficient):
var MyCheckboxes=$("input[name='mycheckboxes']");
MyCheckboxes.change(function() {
$("#showme").toggle(MyCheckboxes.is(":checked"));
});
HTML
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<div id="showme" style="display: none">Show me</div>
Code in action (Version 1).
Code in action (Version 2).
--- Different Checkbox Names Version ---
For different named checkboxes, wrap them in a DIV with an identifier. E.g.
jQuery
var MyCheckboxes=$("#checkboxgroup :checkbox");
MyCheckboxes.change(function() {
$("#showme").toggle(MyCheckboxes.is(":checked"));
});
HTML
<div id="checkboxgroup">
<input type="checkbox" name="mycheckbox1" />
<input type="checkbox" name="mycheckbox2" />
<input type="checkbox" name="mycheckbox3" />
<input type="checkbox" name="mycheckbox4" />
</div>
<div id="showme" style="display: none">Show me</div>
This code in action.
Not really, you need Javascript for this one... Or maybe... Let's say:
<html>
<head>
<style type="text/css">
#input_container > input + input + input + div {display:none}
#input_container > input:checked + input:checked + input:checked + div {display:block}
</style>
</head>
<div id="input_container">
<input type="checkbox">blah1
<input type="checkbox">blah2
<input type="checkbox">blah3
<div>To show/hide</div>
</div>
</body>
</html>
I'd create a function that uses a variable that tracks the number of checkboxes checked:
var numberOfChecks = 0;
function display(ev) {
var e = ev||window.event;
if (this.checked) {
numberOfChecks++;
} else {
numberOfChecks--;
}
if (!numberOfChecks) {
//hide div code
} else {
//display div code
}
}
Use that function for each onClick event for every checkbox. In the ideal world this would be done inside some initialization function so that numberOfChecks and display aren't in the global namespace.
Plain Javascript:
HTML
<div id="checkboxes">
<input type="checkbox" name="check1">
<input type="checkbox" name="check2">
<input type="checkbox" name="check3">
<input type="checkbox" name="check4">
</div>
<div id="hiddendiv"><!-- more stuff --></div>
Javascript
(function() { //Create clousre to hide the checked variable
var checked = 0;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
for (var i=0, l=inputs.length; i<l; i++) {
if (inputs[i].type == 'checkbox') {
if (inputs[i].checked) checked++; //Count checkboxes that might be checked on page load
inputs[i].onchange = function() {
checked += this.checked ? 1 : -1;
var hiddendiv = document.getElementById('hiddendiv');
if (!checked) hiddendiv.style.display = "none";
else hiddendiv.style.display = "";
};
}
}
}());
The other option is to simply iterate through each checkbox every time the change event is fired rather than relying on counting, which is probably more error prone. Obviously jQuery is more concise, but a little verbosity never hurt anyone.
function toggleCheckbox(id) {
if ($("input[id=" + id + "]").is(':checked')) {
$( "#"+id ).prop( "checked", false );
} else {
$( "#"+id ).prop( "checked", true );
}
}
Just pass the id of your checkbox

Categories