<script>
$(document).ready(function(){
var value = $('input[name="yesno"]').change(function(){
if($('#imageCheck').prop('checked')){
// alert('Image Option checked!');
}else if($('#textCheck').prop('checked')){
// alert('Text Option Checked!');
}
});
});
</script>
<input type="radio" onclick="javascript:imageTextCheck();" name="yesno"
id="imageCheck"/>   <b>Text</b>
<input type="radio" onclick="javascript:imageTextCheck();"name="yesno"
id="textCheck"/>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
how i can save the value of radio button in hidden field. If i Click on image it saves image value.
$(document).ready(function(){
var value = $('input[name="yesno"]').click(function(){
$('#radioCheck').val($(this).val());
});
setInterval(() => console.log( $('#radioCheck').val() ), 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="yesno" value="imageCheck" id="imageCheck"/><label for="imageCheck">imageCheck</label>
<br />
<input type="radio" name="yesno"value="textCheck" id="textCheck"/><label for="textCheck">textCheck</label>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
hope this one helps you :)
the setInterval is just to print out the hidden field's value each and every second so when you click on a radio button you can see that it sets the hidden input's value
Here is a simple solution for your problem: I have written one sample of code to explain the problem:
First: OnClick of radio button save the value of radio button if it is checked.
var radioValue = $("input[name='yesno']:checked").val();
Second: Assign the checked radio button value to the hidden input field.
$(document).ready(function(e) {
$("input[type='radio']").click(function(){
var radioValue = $("input[name='yesno']:checked").val();
if(radioValue) {
$("#radioCheck").val(radioValue);
console.clear();
console.log($("#radioCheck").val());
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_radioButton">
<input id="image_radio_check" value="imageButtonChecked" type="radio" class="radio_button" name="yesno" /> Image Radio Button
</div>
<div class="text_radioButton">
<input id="text_radio_check" value="textButtonChecked" type="radio" class="radio_button" name="yesno" />Text Radio Button
</div>
<div class="hidden_input">
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
</div>
Hope this may hep you in solving your problem.
Related
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
I have two radio buttons with text label. I try to remove the radio button that does not have value then the radio button was remove successfully, but the problem is its text label, I also want to remove them but i can not. Can anyone show me how to do that? Thank you so much for reading my question!
Add a class to the label when you remove the button with the name hidden for example. Then in the .css set the .hidden { display: none;}
you have two options
you can add same class name for both radio and text field and hide the class
eg:
<input type="radio" class="myclass" >
<label class="myclass">abc</label>
$(".myclass").hide();
2.also you can add input feild and lable to Div,hide div
eg:-
<div id="mydiv">
<input type="radio" ><label >abc</label>
</div>
$("#mydiv").hide();
This will work for you, use element.each to find all the radios without value and remove them ...
Here in this code, only first radio will be displayed because it has value and the second one is removed and the label for second is also removed...
$(document).ready(function(){
$('input[type="radio"]:not([value])').each(function() {
var idVal = $(this).attr("id");
$(this).remove();
$("label[for='"+idVal+"']").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="submit" id="submit" action="#" method="post">
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Second Item</label>
<input type="radio" id="two" name="first_item" />
</form>
i created a form with cal() but im not able to make it work with radio input.
It worked with select and option, but now the value isnt taken.
here the code
<script>
function cal()
{
var pl=document.form1.template.value;
var resultat=pl;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
</script>
<form name="form1">
<label for="Template">Option 1 : Template</label>
<ul>
<li id="template"><label for="logo+texte">Logo et texte</label>
<input type="radio" id="test" name="template" value="500" onclick="cal()"></li>
<li><label for="base">Base</label>
<input type="radio" id="test" name="template" value="800" onclick="cal()"></li>
<li><label for="perso">Sur-Mesure</label>
<input type="radio" id="test" name="template" value="2900" onclick="cal()"></li></ul>
<input type="text" value="0" name="tresultat">
</form>
any idea to get the value in the text input when selected ?
thanks
Radio buttons are weird because there's a list of separate elements instead of just one. The simplest thing to do is to pass the element itself as a parameter:
function cal( button )
{
var pl = button.value;
var resultat=pl;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
and then change the radio buttons:
<input type="radio" id="test" name="template" value="800" onclick="cal( this )"></li>
passing this to the function.
Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>
Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}
function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>
var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good
You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}
I know it can be done with input boxes using keyup paste on JQuery but what about Radio buttons?
Example:
User Selects option from Area A (radio button) and it selects(syncs) area B
<!--AREA A (Source) -->
<input id="radio_A" name="radio_A" type="radio" value="Value1" />
<input id="radio_A2" name="radio_A" type="radio" value="Value2" />
<!--AREA B (Target)-->
<input id="radio_B" name="radio_B" type="radio" value="Value1" />
<input id="radio_B2" name="radio_B" type="radio" value="Value2" />
$('input[name=radio_A]').change(function() {
var index = $(this).index('input[name=radio_A]');
$('input[name=radio_B]:eq(' + index + ')').attr('checked','checked');
});
Code: http://jsfiddle.net/BUbHf/1/
Try this:
$("#radio_A").click(function() {
$("#radio_B").attr("checked", $(this).attr("checked"));
});
$("#radio_A2").click(function() {
$("#radio_B2").attr("checked", $(this).attr("checked"));
});
Example fiddle
$("input[name='radioGroup1'][value='"+$("input[name='radioGroup2']:checked").val()+"']").prop("checked",true);