So I have some custom radio buttons which I created using js and some css, now I want when I click on a custom radio button, to set the clicked radio button as checked and the order ones as unchecked, so it should be only one checed radio button at the time.Here is what i tried to do, but doesn't work.
$('.custom-checkbox li span, .bg-check').live('click', function(){
$(this).parent().find('span').each(function(){
$(this).addClass('checked').find('input:radio').attr('checked','');
});
$(this).addClass('checked').find('input:radio').attr('checked','checked');
return false;
});
Some please help me, I really don't get this.
//LE
function customCheckBox()
{
$('.custom-checkbox li').find('input:radio').hide().wrap('<span />');
$('.custom-checkbox li span, .bg-check').live('click', function(){
$(this).parent().find('span').each(function(){
$(this).removeClass('checked').find('input:radio').attr('checked',false);
});
$(this).addClass('checked').find('input:radio').attr('checked',true);
return false;
});
}
This is how it works, I find all the radio inputs, and I wrap them with a <span> and the <span> element has some css styling...a custom image.
The Html
<ul class="custom-checkbox clearfix">
<li><input type="radio" name="ext" id="a" value=".ro"/><label for="a">.ro</label></li>
<li><input type="radio" name="ext" id="b" value=".com"/><label for="b">.com</label></li>
<li><input type="radio" name="ext" id="c" value=".net"/><label for="c">.net</label></li>
<li><input type="radio" name="ext" id="d" value=".org"/><label for="d">.org</label></li>
<li><input type="radio" name="ext" id="e" value=".info"/><label for="e">.info</label></li>
<li><input type="radio" name="ext" id="f" value=".biz"/><label for="f">.biz</label></li>
<li><input type="radio" name="ext" id="g" value=".us"/><label for="g">.us</label></li>
<li><input type="radio" name="ext" id="h" value=".eu"/><label for="h">.eu</label></li>
<li><input type="radio" name="ext" id="i" value=".mobi"/><label for="i">.mobi</label></li>
<li><input type="radio" name="ext" id="j" value=".name"/><label for="j">.name</label></li>
</ul>
In jQuery, the attributes 'checked' and 'selected' are set with the values true and false.
Assuming that there's no other underlying problem with your code, that should fix it. If it still doesn't work, you need to give a little bit more context, i.e. markup and maybe supporting code.
For a first shot, you would adjust your code like this:
$('.custom-checkbox li span, .bg-check').live('click', function(){
$(this)
.closest('.custom-checkbox')
.find('span')
.removeClass('checked')
.end()
.end()
.addClass('checked')
.find('input:radio')
.attr('checked',true)
.end();
});
Related
The goal is to have several elements trigger a specific text message for each one when the mouse if over it, and no text if neither one if hovered over. From other questions I found that $("#id").is(":hover") should return true if the mouse is over the element, but it doesn't seem to do it. They all return false and the text is "None"
HTML:
<input class="r_check" type="checkbox" id="r1" name="rating" value="1"><label for="r1"></label>
<input class="r_check" type="checkbox" id="r2" name="rating" value="2"><label for="r2"></label>
<input class="r_check" type="checkbox" id="r3" name="rating" value="3"><label for="r3"></label>
<p class="text" id="the_text"></p>
Javascript/Jquery:
$(document).ready(function(){
var text = $("#the_text");
if($("#r1").is(":hover")){
text.html("Low");
}else if($("#r2").is(":hover")){
text.html("Medium");
}else if($("#r3").is(":hover")){
text.html("High");
}else{
text.html("None");
}
});
I tried to replace the input fields with simple <p id="r1">input 1</p> elements to see if the label or the class of the inputs is preventing the hover event, but that didn't work either.
Your problem can be written in a much neater and easier way as below
Working JSFiddle
<input class="r_check" type="checkbox" id="r1" name="rating" value="1" data-text="Low">
<input class="r_check" type="checkbox" id="r2" name="rating" value="2" data-text="Medium">
<input class="r_check" type="checkbox" id="r3" name="rating" value="3" data-text="High">
<p class="text" id="the_text"></p>
$(document).ready(function() {
$(".r_check").each(function() {
$(this)
.mouseover(function() {
$("#the_text").html($(this).attr('data-text'))
})
.mouseleave(function() {
$("#the_text").html('');
});
})
});
$("#id").on("mouseenter", function(e) { });
That should do it
What you're doing is testing if themouse is over it just once when the page is loaded, what you should do is using an event that's triggered when the mouse is over your input( either with jquery's $('selector').hover(handlerIn,handlerOut) or with $('selector').on("mouseenter,function() {} ) ;
(Here's the difference )
Working jsFiddle
Put tags input type = "radio" with its attribute data-group:
<input type="radio" id="id1" data-group="group1">
<input type="radio" id="id2" data-group="group1"><br>
<input type="radio" id="id3" data-group="group2">
<input type="radio" id="id4" data-group="group2"><br>
How at all elements of input type="radio", which is data-group "group1", set the checked=false?
You can use the attribute selector:
$('input[type="radio"][data-group="group1"]').prop('checked', false);
Or filter():
$('input[type="radio"]').filter(function() {
return $(this).data('group') == 'group1';
}).prop('checked', false);
The best way to group radio buttons is to use the name attribute; the browser will then group them together for you, unchecking others when you check another member of the same group. That's the purpose of input[type=radio]:
<input type="radio" id="id1" name="group1">
<input type="radio" id="id2" name="group1"><br>
<input type="radio" id="id3" name="group2">
<input type="radio" id="id4" name="group2"><br>
And if you wanted to make all of the name="group1" ones unchecked, then:
$("input[type=radio][name=group1]").prop("checked", false);
But if you want to use your current structure, and you're asking how to set them all unchecked, then you can use an attribute selector:
$("input[type=radio][data-group=group1]").prop("checked", false);
Hi I'm trying to create a simple quiz. I'm new to jQuery so apologies if it looks daft.
But it's not working. If the user selects q1b...the correct answer...jQuery will disable the remaining radio buttons.
html form:
<div class="quiz">
<ul class="no-bullet" id="question1">
<li><input type="radio" name="q1" id="q1a"> <label for="q1a">Incorrect</label></li>
<li class="answer"><input type="radio" name="q1" id="q1b"> <label for="q1b">Correct</label></li>
<li><input type="radio" name="q1" id="q1c"> <label for="q1c">Incorrect</label></li>
</ul>
</div>
and the jQuery:
$(document).ready(function(){
//If user selects q1b which is the correct answer...
//all other radio buttons will be disabled
$('#question1').click(function() {
if($('#q1b').is(':checked'))
{
//disables radio button q1a and radio button q1c
$("input[type='radio' id="q1a" && "q1c").removeAttr("disabled");
}
});
});
You can try this : register click event handler for .answer radio button and inside it disable all other sibling radio button using .prop()
$(document).ready(function(){
//If user selects q1b which is the correct answer...
//all other radio buttons will be disabled
$('li.answer input[type="radio"]').click(function() {
//disable all other radio button
$(this).closest('ul').find('input[type="radio"]').not(this).prop('disabled',true);
});
});
$(document).ready(function(){
$('li.answer input[type="radio"]').click(function() {
$(this).closest('ul').find('input[type="radio"]').not(this).attr('disabled',true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="quiz">
<ul class="no-bullet" id="question1">
<li><input type="radio" name="q1" id="q1a"> <label for="q1a">Incorrect</label></li>
<li class="answer"><input type="radio" name="q1" id="q1b"> <label for="q1b">Correct</label></li>
<li><input type="radio" name="q1" id="q1c"> <label for="q1c">Incorrect</label></li>
</ul>
</div>
Ok so I am making a test that has a list of questions that contains a list of answers. Im trying to make the test change the color of the users wrong answers to highlight red and have the correct answers highlighted green. I understand how to change the background color of elements. However i do not understand how to change the background color of the inner html of a input element of the radio type. When i run this code i think its trying to change the actual radio input. Any help is appreciated.
A sample for HTML test:
<ol>
<li ><p id = "question 1">What are the three main areas of the Standard User Interface?</p>
<ul type="none">
<li><input type="radio" name="q1" value="0" /> Header, Banner, Frame, Application Window</li>
<li><input type="radio" name="q1" value="0" /> Content Frame, Homepage, Form </li>
<li><input type="radio" name="q1" value="1" /> Application Navigator, Banner Frame, Content Frame </li>
<li><input type="radio" name="q1" value="0" /> Larry, Moe, and Curly</li>
</ul>
</li>
<li><p id = "question 2">In the User interface, what is the gray toolbar called which allows you to add bookmarks?</p>
<ul type="none">
<li><input type="radio" name="q2" value="0" /> Gauge</li>
<li><input type="radio" name="q2" value="1" /> Edge</li>
<li><input type="radio" name="q2" value="0" /> Remedy</li>
<li><input type="radio" name="q2" value="0" /> Banner</li>
</ul>
</li>
<li><p id = "question 3">What can be captured in an update set?</p>
<ul type="none">
<li><input type="radio" name="q3" value="0" /> Modified CI Rules</li>
<li><input type="radio" name="q3" value="1" /> Business Rules</li>
<li><input type="radio" name="q3" value="0" /> Scheduled Jobs</li>
<li><input type="radio" name="q3" value="0" /> None of these</li>
</ul>
</li>
</ol>
<button id = "finish" onchange = "hide" onclick="finishTest()"> Submit Test </button> <button id = "retry" onclick="reloadPage()"> Try Again?</button>
My javascript Code:
function finishTest(){
//There are actually 37 questions on the test so far only included 3
var score = 0;
var totalQuestions = 37;
for(var questionNum = 1; questionNum<=totalQuestions; questionNum++) {
var radios = document.getElementsByName('q'+questionNum);
var uQuestion = document.getElementById("question "+questionNum).innerHTML;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked && radios[i].value=="1"){
score++;
alert(radios.innerHTML);
radios.innerHTML.style.backgroundColor = "lawngreen";
}else if (radios[i].checked && radios[i].value=="0"){
alert(radios.innerHTML);
radios.innerHTML.style.backgroundColor = "red";
}
}
}
score = parseFloat(score*100/totalQuestions).toFixed(1);
alert("You scored "+score+"%");
document.getElementById('finish').style.visibility='hidden';
}
The best approach is to use two different classes correct and wrong and assign them to answers.
Define the style of two CSS classes correct and wrong:
.correct {
background-color : green;
}
.wrong {
background-color : red;
}
Then in your JavaScript, assign the corresponding classes for each answer (the corresponding <li> tag) :
yourAnswer.className="correct"; or yourAnswer.className="wrong";
Where yourAnswer is the <li> of each selected answer.
Note: As suggested by Chris Baker it would be better to put the input button and its corresponding text in a label together, it's more ergonomic as you can see in the first radio of the DEMO.
<li>
<label for="q1a">
<input id="q1a" type="radio" name="q1" value="0" /> Answer with a label
</label>
</li>
Here's a DEMO Fiddle
Just make two css classes "correct" and "wrong". Then assign these classes to the corresponding li elements.
Jsfiddle demo
li.correct{
color:green;
}
li.wrong{
color:red;
}
I want replace a p tag value if a radio is checked.
I write some JS to do this,but nothing changed.
this is my code(I use jquery)
<script>
$(function(){
if ($('#A:checked')) {
$("#change_me").html('<input type="radio" value="1" name="fruit">')
}
if ($('#B:checked')) {
$("#change_me").html('<input type="radio" value="2" name="fruit">')
}
}
</script>
<input type="radio" name="e" id="A" checked="checked">
<input type="radio" name="e" id="B">
<p id="change_me">
<input type="radio" value="1" name="fruit">
</p>
Thanks.
The :checked selector matches elements that are currently checked.
Writing $('#B:checked') returns a jQuery object containing either zero or one element. It cannot be used directly as a condition.
Instead, you can check if ($('#B:checked').length) to see whether the jQuery object has anything in it.
First, you don't need to recreate the radio button if only the value is changing.
$(function(){
if ($('#A:checked').size() > 0) {
$("#change_me input[type=radio]").val('1')
}
if ($('#B:checked').size() > 0) {
$("#change_me input[type=radio]").val('2')
}
}
HTML:
<input type="radio" name="e" id="A" checked="checked">
<input type="radio" name="e" id="B">
<p id="change_me">
<input type="radio" value="1" name="fruit">
</p>
Replace the JavaScript code you have with the following
$(function(){
$('input[name=e]').change(function(){
if($(this).attr('id') == 'A')
{
$("#change_me input").val('1');
}
else
{
$("#change_me input").val('2');
}
});
});