I'm trying to set radio buttons for large paragraphs choices with multiple lines.
But how do I make the radio button appear not at the beginning but as I mentioned in the image.
I am able to divide the elements in the list with lines but the radio buttons are actually coming at the beginning of the element just like normal letter in a text. enter image description here
Here is the code that I've tried for list items
<ul>
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</div>
</span>
<hr/ style="margin-top:5px; margin-bottom:5px;">
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</span>
<hr/ style="margin-top:5px; margin-bottom:5px;">
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</span>
<hr/ style="margin-top:5px; margin-bottom:5px;">
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</span>
</ul>
Codepen demo
I would first use a more meaningful markup, using a <label for="..."> element, keeping the style off from the markup and removing the <hr> element, like so
<fieldset>
<ul>
<li>
<input type="radio" id="rb1" name="rb" />
<label for="rb1">This label <br>is 3 lines <br />long</label>
</li>
<li>
<input type="radio" id="rb2" name="rb" />
<label for="rb2">This label <br>is 4 <br />lines <br />long</label>
</li>
<li>
<input type="radio" id="rb3" name="rb" />
<label for="rb3">This label <br>is 3 lines <br />long</label>
</li>
</ul>
</fieldset>
since all the radioboxes should belong to a single fieldset and you have a list of radioboxes. The vertical alignment could easily be done using Flexbox on the list-items, by displacing elements by rows and setting a center alignment for the cross-axis
fieldset li {
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px #ddd solid; }
fieldset label {
cursor: pointer;
margin-left: 30px; }
I believe fcalderan has given the best answer already - he even gave you the CSS.
Just to reiterate his point. You use the label tag to label your inputs. You can then use the 'for' attribute like this: 'for="place-id-of-input-here"' within your label, to point the label to the input. This makes the label clickable (you can click the text as well as clicking the radio button). Also, you can target the two parts of your input separately, the input and the label (like fcalderan has done).
Hope this helps, J.
Related
The outcome I am after is that when a user sends keyboard focus to a radio button group and navigates to each radio button using the arrow keys, or, clicks a radio button with a pointing device (mouse), the data-attribute value for that radio button is set to an element (h2).
I have got this far , and am now stuck. I am using an ID for the example, however, I would prefer to use a class or the data-set="X".
The code below sets the first data-col value but not the second.
Thanks for any help as I learn so much from Stackoverflow. I need this in vanilla JS and not jQuery, sorry.
<p>
<label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" data-set="Green" id="demo3">
</label>
<label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" data-set="Blue" id="demo3">
</label>
</p>
<h2 id="chjkl"></h2>
document.getElementById('demo3').onclick = function changeClk() {
const setCol = document.querySelector('#demo3');
document.getElementById('chjkl').innerHTML = setCol.dataset.col
}
document.getElementById('demo3').onfocus = function changeFoc() {
const setCol = document.querySelector('#demo3');
document.getElementById('chjkl').innerHTML = setCol.dataset.col
}
Use the event.target to get the dataset.
In the example below I change the color of your h2 elements background. Note that I am passing the event into the function and calling the function in the eventListener.
Also rather than having two eventListeners, I add a class to the radio button and then query that using querySelectorAll(). Then run the nodeList through a loop and check the event.target when the eventListener is fired.
An issue with your code is you have more than one element with the same ID. You should not have more than one element with any unique ID. ID must be unique to only one single element.
let radio = document.querySelectorAll('.radio')
let target = document.getElementById('chjkl')
function changeColor(e) {
target.style.backgroundColor = e.target.dataset.col
target.textContent = e.target.dataset.col
}
radio.forEach(btn => {
btn.addEventListener('focus', changeColor)
})
#chjkl {
display: flex;
justify-content: center;
letter-spacing: 1.3rem;
}
<p>
<label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" class="radio">
</label>
<label for="">The colour is Red
<input type="radio" name="bob" data-col="Red" class="radio">
</label>
<label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" class="radio">
</label>
<label for="">The colour is Orange
<input type="radio" name="bob" data-col="Orange" class="radio">
</label>
</p>
<h2 id="chjkl"></h2>
I have multiple radio buttons, each one inside a <span> with margin, so they seem like a button with a radio element inside. how can I check the radio button when I click anywhere inside the <span> parent element of the radio button
UX oriented
<span class="radio-box" id="white-box">
<input type="radio" id="white" name="colour"> White
</span>
<span class="radio-box" id="red-box">
<input type="radio" id="red" name="colour"> Red
</span>
<span class="radio-box" id="blue-box">
<input type="radio" id="blue" name="colour"> Blue
</span>
sorry, very noob at Javascript
thanks :)
This is exactly what label elements are for. Use those, rather than span elements:
<label class="radio-box" id="white-box">
<input type="radio" id="white" name="colour"> White
</label>
<label class="radio-box" id="red-box">
<input type="radio" id="red" name="colour"> Red
</label>
<label class="radio-box" id="blue-box">
<input type="radio" id="blue" name="colour"> Blue
</label>
When the label wraps the input like that, it's associated with that input. (If you couldn't use wrapping, you could use the for attribute to tell the label what the id of its associated input is.)
You could make it work with spans. Targeting just those spans:
$("span > input[type=radio][name=colour]").parent().on("click", function() {
$(this).find("input[type=radio][name=colour]").prop("checked", true);
});
or targeting any input[type=radio] inside a span.radio-box:
$("span.radio-box > input[type=radio]").parent().on("click", function() {
$(this).find("input[type=radio]").prop("checked", true);
});
But again, this is exactly what label is for, so best to use that.
If you want to do this without the <label> tag and without jquery and just vanilla JavaScript then here's a solution.
var radioBoxes = document.querySelectorAll("span.radio-box");
radioBoxes.forEach(function (box) {
var radioButton = box.querySelector("input[type='radio']");
box.addEventListener("click", function () {
radioButton.click();
});
});
Currently I am using the below method using JS to generate a block of text in a right column when a check box is clicked ticked in a left column.
This has been working fine, however each time I need to add a check box, I need to add a new class and new formContainer element. With the original 3 I had, wasn't a big deal. But now that I'm up to 10 and growing, getting a bit cumbersome.
What better possibilities exist to generate a div/block of text on a different part of the page as a result of a ticked check box?
Check Box
<input id="chk" data-detail="<br>Right 1" class="chkbox" type="checkbox" value="results" />1
Creating individual class
<div class="formContainer"></div>
Script
<script>
$('.chkbox').on('click',function(){
if($(this).is(':checked'))
{
$('.formContainer').html('<div class="new">'+$(this).data('detail')+'</div>');
}
else
{
$('.formContainer').html('');
}
});
</script>
If you are wanting them in columns you can generate them using bootstrap gridsystem.
<div class="formContainer>
<div class="container">
<div class="row">
<div class="col-m-4"></div>
<div class="col-m-4"></div>
<div class="col-m-4"></div>
</div>
<div class="row">
...
</div>
</div>
</div>
If you are wanting to keep them in the same column you could just use .append()
$('.formContainer').append('<div class="new">'+$(this).data('detail')+'</div>');
These can be used together to generate a fluid system or just the append can be used to keep adding divs to your formContainer
I would suggest appending a form after your checkbox using the Jquery function .after(newElement);
Play with it on codepen
Html:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.formContainer{
height: 50px;
width: 100%;
background-color: gray;
}
</style>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
JQuery:
$(document).ready(function(){
$('.checkboxesThatAppends').click(function(){
var associatedFormId = $(this).attr('data-associated-form-id');
if(associatedFormId){
//if there is a form container associated with this checkbox already
//then let's remove that form.
//and remove the association from the checkbox
$('#'+associatedFormId).remove();
$(this).attr('data-associated-form-id', '');
}else{
//generate an Id for the new form to attach.
var newId = new Date().getTime();
$(this).attr('data-associated-form-id', newId);
$(this).parent().after('<div id="'+newId+'" class="formContainer"></div> ');
}
});
});
You can just use jQuery's append() and remove() methods in combination with wrapping HTML elements to achieve this effect.
JSFiddle: https://jsfiddle.net/xuc4tze0/1/
HTML
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 1" class="chkbox" type="checkbox" value="results" />1
</div>
</div>
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 2" class="chkbox" type="checkbox" value="results" />2
</div>
</div>
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 3" class="chkbox" type="checkbox" value="results" />3
</div>
</div>
CSS
.row {
display: flex;
width: 400px;
}
.left, .right {
flex: 0 0 50%;
}
Javascript / jQuery
$('.chkbox').on('click', function() {
if ($(this).is(':checked'))
// Find the row and add the 'right' column
$(this).closest('.row').append('<div class="right">' + $(this).data('detail') + '</div>');
} else {
// Find the 'right' column and remove it
$(this).closest('.row').find('.right').remove();
}
});
Depending on your need and the content of the divs I got a couple of suggestions :
Modal popups. If you these divs are just notifications then a popup would do (but doubt this is what you need).
List group, use bootstrap's neat class list group to show the needed info in an <ul> element, the JS that comes with these can be neat as well with special animations.
Use tooltips on each checkbox instead of getting a whole div appearing.
Last suggestion which I like least is putting all of your div's in a single container div on the right. Fix its width and height and set overflow attribute so you can scroll up and down the shown divs
I have two forms on the same page with two labels with for attributes pointing to two checkboxes that have the same ID and name.
When I click one of the second form labels it checks the first form checkbox.
In this case the problem lies when you click the 'x name 2' label, it checks the 'x name' check box, even though they are in different forms:
.customCheckbox div label {
padding: 5px;
background-color: white;
border: 2px solid #aaaaaa;
background-image: none;
}
.customCheckbox div input {
margin: 8px auto;
padding: 5px;
text-align: left;
margin-left: -999999px;
float: left;
}
.customCheckbox input[type=checkbox]:checked ~ label,
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name</label>
</div>
</div>
</form>
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name 2</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name 2</label>
</div>
</div>
</form>
I'd like to stay away from renaming the elements (as there are quite a few places this occurs)
I'd like to try to stay away from JavaScript (if possible)
Since I am using CSS for styling the labels and checkboxes I cannot nest the checkbox inside the label (because you can't style a parent element in CSS)
It is not legal to use the same id property twice on the same page. It does not matter at all if the elements are on the same form or different forms.
They can absolutely have the same name property. Names are what gets sent to your server. You can have fifty elements on the same form with the same name if you want.
But the whole purpose of IDs is that they absolutely must be unique on the page.
So simply make the first one ... id="x1" name="x" ... and the second ... id="x2" name="x" ... and then make your labels point to for="x1" or for="x2"
There's no problem when different input fields have the same name, as long as they're in a different form or they represent the same parameter (eg. in the case of radio buttons).
However, you should NEVER use the same id for different HTML elements.
From the HTML5 specs:
The id attribute specifies its element's unique identifier (ID).
If you make your ids unique, your labels will work as expected.
Each of my radio buttons is inside a div, and immediately beside the input (radio) I have some text in a span with the CSS set to display:none. Since I have multiple radio buttons I'm trying set the span to show for ONLY the span beside the radio button that's selected. Thoughts?
Here's what I have currently.
$('input:checked').next().show();
Here's my fiddle for the full quiz I'm trying to build
http://jsfiddle.net/YSSWL/96/
Feel free to critique the rest of my jquery, as I'm likely over complicating something. I don't have a ton of experience with jquery or js (working on it).
Solution Edit: As Chausser pointed out I can use
$('input:checked').parent().find('span').show();
to select the span nearest the parent of the selected input and apply .show();
You can use:
$('input:checked').parent().find('span').show();
I updated your html to use some consistent classes and fixed your reset function as well. For working code check:
http://jsfiddle.net/YSSWL/106/
You can solve this completely with CSS:
.incorrect .incor { display: inline; }
http://jsfiddle.net/YSSWL/105/
Here is a better way to write this I think. A bit more flexible. Sorry I deleted a bunch of your stuff to make it clear what was going on.
JS:
$(document).ready(function () {
$(document).on('click', '#radiochk1', function(){
var checkedRadio = $('input[name="question1"]:checked');
$('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
if(checkedRadio.hasClass('rightAnswer')){
checkedRadio.parent().find('span.answer').addClass('correct');
}else{
checkedRadio.parent().find('span.answer').addClass('incorrect');
}
});
$(document).on('click', '#resetq1', function(){
$('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
$('input[name="question1"]').attr('checked', false);
});
});
HTML:
<form class="ra">
<div class="cor">
<input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i1" />B. <span class="answer">Choice B</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i2 rightAnswer" />C. <span class="answer">Choice C</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i3" />D. <span class="answer">Choice D</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i4" />E. <span class="answer">Choice E</span>
</div>
</form>
<p class="rationale1"><b>Rationale:</b>
<br />
<br /><span class="rattext">Explanation of what was done wrong.</span>
</p>
<button id="radiochk1" class="checkhide">Check your answer</button>
<button id="resetq1" class="reset">Reset</button>