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>
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.
Example on JS FIddle.
The question is:
If the first click is on the radio button, it behaves normally; But if the first click is on span text (i.e. aaaa), it can not get the checked radio.
Please tell me why and how I can make it the same.
This code, which happens when the radio button is clicked:
var obj = $(e.target||e.srcElement).parent();
score = obj.find('input:checked').val();
Puts the parent in the obj variable, which is the containing DIV. This contains both of the radio buttons. It then finds the FIRST checked input element in that DIV, which is always the one with the 'first' value after it is checked.
You should just get the value of the item which was clicked:
score = $(e.target||e.srcElement).val();
This can be rewritten as
score = $(this).val();
Here's a working example: http://jsfiddle.net/RPSwD/10/
See new fiddle.
The problem is this line:
score = obj.find('input:checked').val();
Change it to:
score = $(this).val();
The reason for this is that you're looking for the selected item in the div but on the first click, the item has yet to become selected. Given that the event is targeted at the radio button, you can assume that radio is the selected one.
Note also that you don't need to use e.target||e.srcElement. jQuery takes care of this for you. Use $(this) instead.
Additionally, you need to set a name on the radio buttons to stop both from becoming selected. Alternatively, if having both selected is desired behaviour, use check boxes instead.
You don't need to use any of the event properties:
var score = $(this).val(); // in your '.x' click handler
$('.y').click(function(e) {
$(this).prev('.x').click();
});
just wrap your radio button inside label tag like this
<label for="radio1">
<input type=radio class="x" id="radio1" value="First"/>
<span class="y">aaaa</span>
</label>
No need for extra jquery or javascript
check the demo here
Hey guys so I am creating input elements within a div when I click on a specific radio button with a javascript function.
It works great but when I first load the form the input elements dont appear in the div because the radio button has not been "clicked yet" although one of the radio buttons is default checked.
Basically if its checked I want them to appear, so on body load I have to call a function that checks the radio button I want default and I have to manually display the corresponding input elements that would appear if I had clicked the radio button.
This seems like a dumb work around of what I am trying to achieve, any ideas?
<body onload="startup()">
<input type="radio" name="type" onclick="createInput()" id="testradio" value="test">test</input>
<div id="area">
</div>
</body>
function startup()
{
document.getElementById("testradio").checked = true
createInput();
}
function createInput()
{
var testinput = "<input name='options' value='testing' type='checkbox'>test<br>"
document.getElementById("area").innerHTML = testinput
}
You should set the default value and then call the event. (say onchange)
something like this:
document.getElementById('elID').onchange();
this will then let your event listener fire as if the value where changed in the ui not in code.
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.
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".