I have four radio box like this:
<input type="radio" checked="checked" value="" name="display" style="">Home</input>
<input type="radio" value="" name="display" style="">Featured</input>
<input type="radio" value="" name="display" style="">Normal</input>
<input type="radio" value="" name="display" style="">Draft</input>
Now i have Three DIV for Featured, Normal, Draft radio box with display:none like this:
<div id="Featured" style="display:none">Featured desc</div>
<div id="Normal" style="display:none">Normal desc</div>
<div id="Draft" style="display:none">Draft desc</div>
Now, i need to after click/selected each radio button show div with same id Using jQuery.
NOTE: for Home radio box i dont need to any div.
Note that inputs are self closing, and can't contain text, so you have to change it to
<input type="radio" value="" name="display" />Featured
Then add a class to DIV's so they are easier to target
<div id="Featured" class="desc" style="display:none">Featured desc</div>
Then you can do something like this
$('input[type="radio"]').on('change', function() {
$('.desc').hide();
$('#' + $.trim(this.nextSibling.nodeValue)).toggle(this.checked);
});
FIDDLE
Related
How can I select input type radio by just clicking the space around it?
You could use a <label> tag:
<input type="radio" name="box" id="box">
<label for="box">Your content here</label>
Clicking on the label toggles the input.
You should be using the label element. There are two ways to use it with a radio button, as shown below.
<form>
<label>
<input type="radio" name="options">
<span>Option 1 - Inside Label</span>
</label>
<br>
<input type="radio" name="options" id="button2">
<label for="button2">
<span>Option 2 - Outside Label</span>
</label>
</form>
I am creating a dynamic online survey form in laravel 8. In some questions I have Radio Buttons with Text Box in case of Other Options.
I am generating these questions from a database.
#case(1)
<input type="radio" name="{{ $property->name }}" value="" hidden checked>
#foreach ($property->options as $option)
<input id="{{ $option->option }}" onclick="ShowHideDiv()" type="radio" name="{{ $property->name }}" value="{{ $option->option }}"
{{ old($property->name) == $option->option ? 'checked' : '' }}>
{{ $option->option }}</br>
#endforeach
<div id="dvtext" style="display: block">
<input type="text" id="txtBox" />
</div>
You can see in code, $property is a question and $option are associated options of each question. I have more than 10 question of similar nature. It means coming out of database dynamically. Can you please help me in:
How can add a behavior that, if somebody click on Other (radio button option) on any question, then text box should appear but only on that question.
OR If I keep text box visible all the time and click on text box, automatically Other option (radio button) should be selected/checked.
Thanks
Whenever your radio button is checked first see if the value is Other or not depending on this show() or hide() your div.
Demo Code :
$("input[type=radio]").on("change", function() {
//check if radio is checked and value of checked one is `others`
($(this).val() == "Other") ? $(this).siblings(".dvtext").show(): $(this).siblings(".dvtext").hide()
})
.dvtext {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--give outer divs to seprate-->
<div>
<input type="radio" name="1" value="" hidden checked>
<input type="radio" name="1" value="somethings">somethings <br/>
<input type="radio" name="1" value="Other">Other
<!--use class-->
<div class="dvtext">
<input type="text" class="txtBox" />
</div>
</div>
<div>
<input type="radio" name="2" value="" hidden checked>
<input type="radio" name="2" value="somethings">somethings <br/>
<input type="radio" name="2" value="Other">Other
<!--use class here-->
<div class="dvtext">
<input type="text" class="txtBox" />
</div>
</div>
i got simple form what contain radio input and text input.
My goal is: check radio input when click on text input
Thanks
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
You should have unique id for the input and radio then you can associate a click event in input by its id that will check radio input when click.
using jQuery
$('#gr_1_input_4').click(function(){
$('#gr_1_option_4').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
using JavaScript
document.getElementById('gr_1_input_4').addEventListener('click', function(){
document.getElementById("gr_1_option_4").checked = true;
});
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
You can have focus event handler for input text and inside it set checked property of the radio button.
NOTE: Don't use same id for multiple html elements as it will end up with javascript / jquery not working for id oriented code. You have used gr_1_option_4 as id for both radio and text input.
$(function(){
$("input[type=text][name=group1]").on("focus", function(){
$("input[type=radio][name=group1]").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
Firstly change your Element's Id , you cant have same ids among elements.
Secondly you can add an event handler like
document.getElementById("textId").onclick = function() {myFunction()};
and define that function like
function myFunction() {
document.getElementById("radioButtonID").checked = true;
}
EDIT: I FILL THE ANSWER AND SEE THAT ALREADY SOMEONE HAD ASNWERED but i keep my answer because is not Jquery like the other
One alternative way is using prev .
$('input[type="text"]').click(function(){
$(this).prev('input[type="radio"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
I am trying to change content using radio buttons. content changes when click on radio button but radio is not checked it stays empty, i know something is wrong, can someone suggest me a solution.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['OneWayFlight']" id="oneWayFlight" name="FlightType" />
<label for="oneWayFlight">One way</label>
</div>
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['ReturnTripFlight']" id="roundTripFlight" name="FlightType"/>
<label for="roundTripFlight">Round Trip</label>
You can use ng-model instead of ng-link.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-model="flightType" value="Round Trip">Round trip<br/>
<input type="radio" ng-model="flightType" value="One Way">One Way<br/>
<tt>Flight Type = {{flightType | json}}</tt><br/>
</div>
I have 5 radio buttons and depending of which one is selected I want to change the href link of an image, which sends you to another page. Example: I selected the first radio button. When I click the image, the page "gallery" opens. When I select the second radio button and press the image, it'll open the page "about me"... is there any solution for this with JavaScript?
This is my radio set:
<input checked="" type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<input type="radio" name="slider" id="slide6">
and this is the button:
<div id="down_icon2">
<a href="">
<img src="images/down_icon.png">
</a>
</div>
Create a function to check which radio button is set,
the function sets the desired link.
<input checked="" type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2" >
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<input type="radio" name="slider" id="slide6">
MyLink
<script>
function myFunction() {
if(document.getElementById('slide1').checked) {
document.getElementById('myLink').href = "test.php";
}
}
</script>
you can do the same with the image src
Edit: it is just the case for the first radio button, you have to add the test for the other buttons.
<input type="radio" data-image="http://www.placecage.com/200/300" name="slider" id="slide1">
add a data-image to all the slides with the image you want. Then with Jquery you can do this:
$("input").click(function () {
var clickedRadio = $(this).attr("data-image");
$("img").attr("src", clickedRadio);
})
If you click any input it sets the src of the image to the data-image of the clicked item ;) Note this uses Jquery library
Also here is a working example codepen
That is the answer, it's just use native javascript.it can wrote better if you use extra lib like jQuery.
https://jsfiddle.net/mham9ons/
just use your html:
<input type="radio" name="slider" id="slide2" data-href="xxx1">
<input type="radio" name="slider" id="slide3" data-href="xxx2">
<input type="radio" name="slider" id="slide4" data-href="xxx3">
<input type="radio" name="slider" id="slide5" data-href="xxx4">
<input type="radio" name="slider" id="slide6" data-href="xxx5">
<div id="down_icon2"><img src="images/down_icon.png"></div>
add these code:
var sliders = document.getElementsByName('slider');
var linkWrapper = document.getElementById('down_icon2');
for (var i in sliders){
if(sliders[i].addEventListener){
sliders[i].addEventListener('click', function(){
linkWrapper.childNodes[0].setAttribute('href', this.getAttribute('data-href'));
});
}
}