I know this sounds like an easy question but for some reason I just can't figure it out right now. My question is this, let's say I have two radio buttons on my page:
<input type="radio" checked="checked" name=sport value="soccer" />
<input type="radio" name=sport value="basketball" />
What I want to do is that if I click on a radio button, I want to add a class name to it, and if I click on the other radio button, I want to add the same class to that new clicked radio button and I want the class that I added to the previous one removed, and so on....
Any idea please?
Try this.
$("input[name='sport']").click(function(){
$("input[name='sport']").removeClass('className');
$(this).addClass('className');
});
Demo
Well, something like this could do it:
$('input:radio[name="sport"]').click(function() {
$(this).addClass("yourclasshere")
.siblings('input:radio[name="sport"]').removeClass("yourclasshere");
});
Demo: http://jsfiddle.net/yH6ur/
If the radio buttons in your real project are not actually siblings (because they're wrapped in label elements or something) then do it as per Shankar Sangoli's answer.
This is how I did mine to apply to any radio options so I don't have to specify a name each time. I'm sort of new to this so I'm sure someone will have something to say about it. The parent is a label that I have css as a button
$(".noradio").on('click', function(){
var n=$(this).attr("name");
$("input[name='"+n+"']").parent().removeClass('active').removeAttr('checked'); ;
$(this).parent().addClass('active').attr('checked', 'checked');
});
Oh and .noradio is a class on the input itself.
Related
So I have this selection list with radio buttons that looks like this:
What I try to do is when 'AT' is selected I Want to be able to select 1 more option.
for example if 'AT' is checked I also want to be able to check 'Herstart'.
so this condition only needs to happen when 'AT' is selected.
this is a picture of the console on how the radio buttons are build :
I was thinking on something like if(data-status =="AT"){ allow to check one more radio button}
but here I am stuck on what to write in the if block.
this is also not my code so it's even harder to come with a solution.
anyone can point me in the right direction ?
kind regards
you can't select multiple radio buttons, to select multiple we use checkboxes, learn here the difference between checkbox and radio more
here is the working with checkbox:
$(document).ready(function() {
$('.checked').on('change', function() {
var x = $("#check3").is(':checked');
if (x) {
$('#check1').prop('checked', (x));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" class="checked" id="check1">hertstart
<input type="checkbox" class="checked" id="check2">uti,nsa
<input type="checkbox" class="checked" id="check3">AT
Radio buttons are meant to be single choice only. If you need to have more than one option available, use checkboxes. These you can toggle active/disabled with the disabled property and javascript.
In my project, I have a series of inputs, all of type radio button. I want to add functionality where these inputs can be deleted simply by clicking on the little bubble (the bubble that a radio button is). Here is my code so that I can do this:
$('#newAnswers input').click(function(){
var $textToDelete = $(this).val();
$(this).remove();
});
the reason why I'm assigning the value of the radio button to a textToDelete variable is that usually when you have radio buttons in HTML, you'll have text next to it to describe what that radio button is for. I'm creating a variable to hold this value so that I can delete it from the div manually because the code above works only for removing the radio button, and not the description (or I suppose you could call it the value as well) next to it. The code above also works as expected. HOWEVER, once I implement the functionality to delete the description (or value) next to radio button, the code doesn't work as expected. Here is my implementation:
$('#newAnswers input').click(function(){
var $textToDelete = $(this).val();
$(this).remove();
// NEW LINE
$('#newAnswers').html($('#newAnswers').html().replace($textToDelete, ''));
});
With this click function, after you click a radio button, it deletes, but if you click a second, or a third, or a fourth, or so on, the radio buttons will NOT delete. In fact, clicking on them only fills them in (or bubbles them in) as if you're just selecting a radio button normally. However, the FIRST radio button you click with this function works as expected. However, any radio buttons you click after that will not delete and I don't know why.
HTML Structure:
<div id='newAnswers'>
<input type="radio" value="answer1" name="question">answer1<br>
<input type="radio" value="answer2" name="question">answer2<br>
<input type="radio" value="answer3" name="question">answer3<br>
<input type="radio" value="answer4" name="question">answer4<br>
</div>
you can add span to the text,
<input type="radio" value="answer1" name="question"><span>answer1</span><br>
then
$('#newAnswers input').click(function(){
$(this).next().remove();
$(this).remove();
});
If you want to delete a DOM Element you can use .remove() function. this is the usage of .remove()
$(document).ready(function(){
$('.removebut').click(function(){
$('.removeme').remove();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="removeme">Click to remove me</div>
<button class="removebut">Remove</button>
Or if you want to remove the value of input, you can set value to "" with jquery .val()function.
usage of .val()
$(document).ready(function(){
$('.removebut').click(function(){
$('.removeme').val("");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="removeme" value="Click To Remove"/>
<button class="removebut">Remove</button>
How do you create an HTML checkbox that is unclickable, but not greyed out? I used the disabled=disabled tag, but that makes it greyed out (in Chrome). Otherwise it works well. Working in jQuery and Rails...
Thanks.
Usability concerns aside:
$("input:checkbox").click(function() { return false; });
For example: http://jsfiddle.net/nKwRj/
Use jQuery.on with false as the callback:
$(":checkbox").on("click", false);
Fiddle
I had the same issue where i wanted the user to check the box but not the client the client was supposed to see the checked box only and not to make changes so
in html just add a css pointer event style
<input name='test' type='checkbox' style="pointer-events: none;"/>
Prevent checkboxes from being changed by ID or by Class.
/* by class */
$(".nochange").click(function () {
return false;
});
/* by ID */
$("#nochange").click(function () {
return false;
});
<input name='test' type='checkbox' class='nochange' checked='checked' />
<br />
<input name='test' type='checkbox' id='nochange' checked='checked' />
http://jsfiddle.net/mjames757/nX64E/1/
Why do you want to make a unclickable checkbox appear to be clickable? To fool the users?
If you really want to fool the users, you could place a div with 0.01 opacity above it using absolute positioning (no script required). But I still wonder why you feel the need to do this prank on your users... ;)
EDIT: If what you really need is to include a value the user should not change but you don't want what you probably are considering "an ugly disabled checkbox", you should use input type hidden, which is completely invisible.
If you want to indicate that something is preselected but not changeable or something like that, use a disabled checkbox to indicate this (or an image of a pretty checkbox if you like), but beware that the value of a disabled checkbox is not submitted. Use a hidden field to include the the data needed.
Just add onclick="return false" in your HTML code.
Example:
<input type="checkbox" onclick="return false" class="checkbox" checked >
I ran into this post in search of an answer to the initial question - and found the opposals to non-grayed disabled checkboxes convincing, so instead i made a td-tag containing this: <%if rs("yes/no value") = -1 then response.write("√")%> (wing is a &radic). Then i get a clean info wing not inviting to click.
I have a bunch of radio buttons. They each correspond to a number from 1 - 24. I want to display that number somewhere else in the page as soon as a radio button is selected. How would I do this?
Something like this:
<div id="someplace"></div>
<script type="text/javascript">
function updateText(number) {
document.getElementById("someplace").innerHTML = number;
}
</script>
<input value="1" type="radio" onclick="updateText(1)"/>1<br/>
<input value="2" type="radio" onclick="updateText(2)"/>2<br/>
...
If you want to do something more advanced, like not have to put (1) and (2) in each onclick, use something more advanced Jquery.
You create a DIV with the ID "displayNum", with "display:none" style property
Then you create an "onClick" handler to the radio buttons.
The function called from the handler would figure out which button was clicked (from the button's ID) and then change the content of the "displayNum" DIV to the number (using innerHtml property of the DIV), as well as change the "display" property of the DIV from invisible "none" to visible "block".
ok quick scenario:
html:
<span class="answer">blah<input type="radio" value="1"></span>
jquery:
$("span.answer").click(
function() {
check = $("input", this);
check.attr('checked', check.attr('checked') === true ? false : true);
);
Ok so this will check/uncheck the child radio input inside the selected span when I click inside it.
The problem I have is that I don't want to run this event when I actually click on the radio button itself (obviously because jquery will see the radio button as checked and uncheck - in effect the exact opposite of what should happen usually). Something along the lines of this:
$("span.answer:not(span input)").click
This of course doesn't work. Any ideas? Thanks in advance!
Leo
$("span.answer input").click(function(evt)
{
evt.stopPropagation();
});
Will prevent the click event from bubbling up (and triggering the handler on "span.answer".)
There is a specific html tag to accomplish what you try to do with jquery and javascript ..
it is the label tag
<label>blah<input type="radio" value="1" /></label>
this will have the effect you want
[update]
For Internet Explorer 6 to play nice use the complete syntax of the label by using the for attribute which targets the id of an form input/select/etc.. element..
<label for="radio_1">blah<input id="radio_1" type="radio" value="1" /></label>