There are two separate divs: check_one & check_two.
check_one has 4 boxes in it, check_two has 1.
If you check the checkbox within the check_two div, it should uncheck all chekced boxes within the first div, check_one. That's sort of confusing, but that is what I'm attempting to do.
HTML ::
<div id="check_one">
<label>Stuff 1</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 2</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 3</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 4</label> <input name="" type="checkbox" value="" id="group1" checked="checked">
</div>
<br>
<div id="check_two">
<label>Undo</label> <input name="uncheckMe" type="checkbox" value="" id="group2">
</div>
jQuery ::
$('input[name=uncheckMe]').change(
{
var checked = $("#group1").attr("checked");
if(checked)
{
$("#check_two").attr("disabled", true);
}
});
I created a jsFiddle for this http://jsfiddle.net/Twisty/ta2qT/
You're missing a Function within Change():
$('input[name=uncheckMe]').change(function(){
$("#check_one > input").each(function(i) {
if ($(this).is(":checked")) {
$(this).removeAttr("checked");
}
});
});
Try this:
$("input[name='uncheckMe']").change(function(){
if ($(this).is(":checked")){
$("#check_one input").removeAttr("checked");
}
});
And a jsFiddle: http://jsfiddle.net/PgHbu/3/
Related
I'm trying to figure out how to only allow one of two radio buttons to be checked in a form where the two radio buttons don't share the same name. I've been experimenting for hours now, but can't figure it out. Here is what I have currently:
$("#theForm").click(function(){
//alert('You clicked radio!');
if($('input:radio:checked')){
$('input:radio:checked').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
Here's a Fiddle: https://jsfiddle.net/Codewalker/reh0mzs3/1/
the click function will give you an event. you can target the event.target.name to see which radio button was clicked on and then do a simple if statement to uncheck the other radio button
$("#theForm").click(function(){
if(event.target.name == 'topic'){
$('#all').prop("checked", false);
}else{
$('#topic').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
This should work:
<div> <input type="radio" id="contactChoice1" name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="message">
<label for="contactChoice3">Message</label> </div>
$('label').click(function() {
id = this.id.split('-');
if (id[0] === '1') {
id[0] = '2';
} else {
id[0] = '1';
}
$('#' + id[0] + '-' + id[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<input type="radio" id="1-1" name="1-level">
<label for="1-1" id="1-1">1</label>
<input type="radio" id="1-2" name="1-level">
<label for="1-2" id="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level">
<label for="2-1" id="2-1">1</label>
<input type="radio" id="2-2" name="2-level">
<label for="2-2" id="2-2">2</label>
</div>
Is it possible to have one label for multiple inputs (radio)? So if I press the label (e. q. for="1"), two input fields get checked (input with id 1 in div class one and two)? Here is my example:
<div class="one">
<input type="radio" id="1" name="level">
<label for="1">1</label>
<input type="radio" id="2" name="level">
<label for="2">2</label>
</div>
<div class="two">
<input type="radio" id="1" name="level">
<label for="1">1</label>
<input type="radio" id="2" name="level">
<label for="2">2</label>
</div>
Quote from ducumentation:
https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
The LABEL element may be used to attach information to controls. Each
LABEL element is associated with exactly one form control.
So only way to do what you asked is by using JS
HTML:
Use data-input-group-id instead of id and data-for-input-group instead of for. Also you'll now be able to use "1" and "2" not "1-1" etc.
JS:
$('[data-for-input-group]').click(function() {
let inputGroupId = this.dataset.inputGroupId;
$('[data-input-group-id = "'+inputGroupId+'"]').prop('checked', true);
});
Basically what I'm trying to do is have a text field display with this string "Correct" appear below the radio if the correct radio has been clicked.
Here is what I have for the structure
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
</div>
I'm hoping there is a way to do this using CSS but I haven't been able to find much for what I'm trying to accomplish.
This is kinda not very nice solution but can be usable to some certain extend :)
Hope this helps :)
input[type="radio"] + label + span {
display: none;
}
input[type="radio"]:checked + label + span {
display: block;
}
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a" />
<label>[]</label><span><br/>Wrong answer.</span>
<br />
<input type="radio" name="question2" value="b" />
<label>;;</label><span><br/>Wrong answer.</span>
<br />
<input type="radio" name="question2" value="c" />
<label>{}</label><span><br/>Correct answer.</span>
<br />
<input type="radio" name="question2" value="d" />
<label>()</label><span><br/>Wrong answer.</span>
</div>
You can use a non adjacent sibling selector '~' to accomplish what you want if it's a pure CSS solution you're looking for. Notice I did add an id to each of your inputs to make the selectors simpler, though you could accomplish the same thing by checking value.
CSS Explained:
When the radio button ID'd q2 belonging to the parent ID'd question2 has the property 'checked' (note the pseudo selector :checked) the non-adjacent sibling matching the ID question2_status will have the content 'Correct' appended to it's :before pseudo selector. ~ is the reference to the non-adjacent sibling, meaning that it shares the same parent, but isn't directly the previous or next child of it. This is used because the container for the result is below all the options. Therefore you can apply this same logic to any of your questions regardless of the correct answer's position in the list.
#question2 #q2c:checked ~ #question2_status:before {
content: 'Correct';
}
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" id="q2a" value="a"/>
<label>[]</label>
<input type="radio" name="question2" id="q2b" value="b"/>
<label>;;</label>
<input type="radio" name="question2" id="q2c" value="c"/>
<label>{}</label>
<input type="radio" name="question2" id="q2d" value="d"/>
<label>()</label>
<div id='question2_status'></div>
</div>
Edit: You can do this in CSS!
You can achieve this with CSS like so:
input[value="c"]:checked ~ #feedback_box:after {
content: "correct!"
}
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
<p id="feedback_box"></p>
</div>
I'm not sure that you can do this in CSS, but I highly doubt it has the desired capabilities to optimally perform the task. You can add a class to the correct radio button and add event listeners to all of them that trigger when clicked. When clicked, they then display a message, "correct". (note that my way of inserting the message is not optimal, you can use your own way).
Array.prototype.forEach.call(document.getElementsByClassName("correct"), function(element, index) {
element.addEventListener('click', function(event) {
element.parentElement.innerHTML += "<br>correct";
});
});
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" class="correct" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
</div>
The code above does a forEach loop over all the elements that have the class name correct (notice I added that on a radio button) and then adds a listener to them. Once a user clicks on them, it appends "<br>correct" to the parent's innerHTML (not optimal).
i think you can accomplish your goal using javascript.
use the onclick attribute for each radio button. then write two javascript functions (correct and wrong). use a div element for display the output of those javascript functions. here
note that there are two image files in the root directory named correct.jpg and wrong.jpg to display the right mark or wrong mark. you can use a text instead of images. hope this helps. thanks!
<html>
<head>
<script type="text/javascript">
function correct()
{
document.getElementById("displayer").innerHTML="<img src='correct.jpg'/> ";
}
function wrong()
{
document.getElementById("displayer").innerHTML="<img src='wrong.jpg'/> ";
}
</script>
</head>
<body>
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div> <br/>
1) <input type="radio" onclick="wrong();" id="btn1" name="question2" value="a"/>
<label> [ ]</label> <br/>
2) <input type="radio" onclick="wrong();" id="btn2" name="question2" value="b"/>
<label> ; ;</label> <br/>
3) <input type="radio" onclick="correct();" id="btn3" name="question2" value="c"/>
<label> { }</label> <br/>
4) <input type="radio" onclick="wrong();" id="btn4" name="question2" value="d"/>
<label> ( )</label> <br/>
</div>
<div id="displayer">
</div>
</body>
</html>
I'm trying to create a form to use for my work, I guess my question is more of a why does this happen.
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
my css class of "checkbox" looks like this
.checkbox {
float: left;
display: inline;
}
now my code at the next element
<div>First name:<br>
<input type="text" name="firstname"><br>
</div><br><br><br>
I have to add 3 <br>'s to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br>'s. Is there a way to format my css to not need any <br>'s?
I think I need the <br>'s (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br>'s fix that issue, but I don't like using them nor do I think it is semantically correct.
Let's start with a nicely marked up form
The form elements
The radio buttons can be wrapped in a <fieldset> element
The labels can all be marked up with <label> elements. The for attribute links to its input via the matching id attribute. One benefit of this is that users can click/touch on the label.
That gives us this:
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Bring each text input onto a new line
The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:
input[type=text] {
display: block;
}
We want the radio buttons to remain on the one line, so they can be left at their default display: inline. More information on display.
Full example
Bring it all together with a little bit more CSS:
input[type=text] {
display: block;
margin: 5px 0;
}
input[type=radio] + label {
margin-right: 10px;
}
label,
input[type=radio] {
cursor: pointer;
}
fieldset {
border: none;
}
form {
background: #FFF9C4;
width: 500px;
font-family: sans-serif;
}
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Try like this: Demo
<div class="checkbox">
<input type="radio" name="transport_method">Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
<input type="text" name="firstname">
</div>
.clear{clear:both} instead of <br/>
EDIT: If you dont want to create new class you can use like this too :
Updated dmo
.checkbox::after {
display:block;
clear:both;
content:"";
}
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>
<div>
First name:
<br>
<input type="text" name="firstname"><br>
</div>
<div class="clear"></div>
in css
.clear{
clear:both
}
It's as simple as this:
.checkbox{display:block}
And if you mean to have those checbox inputs floated to left, then use
.checkbox input{display:inline-block}
And there you go, no floats, no br tags, nothing weird
Using the new class amit made
use .clear{clear:both} instead of
on the following element, in my case
<div >First name:<br>
<input type="text" name="firstname"><br>
</div>
turned into
<div class="clear">First name:<br>
<input type="text" name="firstname"><br>
</div>
for this jsfiddle - http://jsfiddle.net/Ja3Fx/1/ $('div').trigger('create') doesn't
work as required.
it does style radio button but it isn't quite right ... any ideas ?
<div id="testPage" data-role="page">
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Radio buttons, vertical controlgroup:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">Lizard</label>
</fieldset>
<a id="add-animal" href="#" data-role="button" data-position-to="window">Add Animal</a>
</div>
</div>
$('#add-animal').click(function() {
var fldset = $('fieldset');
$(fldset).append($('<input type="radio" name="radio-choice-1" id="radio-choice-5" value="choice-5"><label for="radio-choice-5">Bat</label>'));
$("input").checkboxradio();
$('div ').trigger('create ');
});
I am using the following code to make a panel. You can try similar code.
$(document).on('pagecreate', '[data-role="page"]', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
});