I want to uncheck a radiobutton i found a way for doing this but while the radio buttons are inside a form the code won't work this is my script for unchecking a checked radio button
<script type="text/javascript">
var allRadios = document.getElementsByName(1);
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
allRadios[x].onclick = function() {
if(booRadio == this){
this.checked = false;
booRadio = null;
}else{
booRadio = this;
}
}
}
</script>
<form name="theForm" target="_blank" action="laravel.php">
<label for="test">test</label>
<input type="radio" id="1" class="radio" name="1" value="1">
<input type="radio" id="2" class="radio" name="1" value="2">
<input type="radio" id="3" class="radio" name="1" value="3">
<input type="radio" id="4" class="radio" name="1" value="4">
</form>
the script works fine when the radio buttons are outside the form tag but it is not working when radio inputs are in the form i am wondering what am i missing here
The problem is the order. You load your javascript before the html is finished.
To solve this, simply place the javascript near the end of the file, just before the closing </body> tag.
If you use jquery, you can also wrap it with $(document).ready(function() { ... }.
Related
i have one checkbox and two radio buttons. when i check the checkbox.i want both the radio buttons to enable and when i uncheck the checkbox i want both the radio button to get disable
below is the code which i have tried
<script>
function myfunction()
{
var radio=document.getElementsByName("disableme");
var len=radio.length;
for(var i=0;i<len;i++)
{
radio[i].disabled=true;
}
}
</script>
Notification
<input type="checkbox" onclick=myfunction() checked>
<input type="radio" name="disableme" id="1"> open
<input type="radio" name="disableme" id="2">close
You should check if checkbox is checked - in order to do that you can pass the element when your calling the function.
see example below
<script>
function myfunction(el) {
var radio=document.getElementsByName("disableme");
var len=radio.length;
for(var i=0;i<len;i++) {
radio[i].disabled=!el.checked;
}
}
</script>
Notification
<input type="checkbox" onclick=myfunction(this) checked>
<input type="radio" name="disableme" id="1">open
<input type="radio" name="disableme" id="2">close
Hopefully somebody can prompt me into the right direction,
I want a simple 3 radio button form, lets say 1,2,3
once 1 has been selected i want to disable options 2 and 3 until page has been refreshed
so maybe those option would grey out and not be selectable
any help appreciated cant find a thing on google
We will group radio buttons in a div:
<div class="readioBtnDiv">
<input type="radio" name="group1" value="1" />1
</div>
<div class="readioBtnDiv">
<input type="radio" name="group2" value="1" />2
</div>
<div class="readioBtnDiv">
<input type="radio" name="group3" value="1" />3
</div>
Now we will disable another radio button when one is selected:
$("input:radio").click(function() {
var $this = $(this);
var value = $this.val();
$this.closest('.readioBtnDiv')
.siblings('.readioBtnDiv')
.find('input:radio[value="' + value + '"]')
.attr("disabled","disabled");
});
Here we go, jQuery way:
HTML:
<form>
<input type="radio" value="1"> 1
<input type="radio" value="2"> 2
<input type="radio" value="3"> 3
</form>
JS:
<script>
$('input').on('click', function() {
$(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
})
</script>
To add jQuery to your project - simply insert
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
inside your <head> </head> tag.
UPDATE:
To keep it after page refreshes you should modify your code to this:
<form>
<input type="radio" value="1" id="radio1"> 1
<input type="radio" value="2" id="radio2"> 2
<input type="radio" value="3" id="radio3"> 3
</form>
<script>
$('#'+localStorage.selected).trigger('click');
$('#'+localStorage.selected).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
$('input').on('click', function() {
$(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
localStorage.setItem('selected', $(this).attr('id'));
})
</script>
I think all the answers are right and accurate to your question above but according to me you would find this answer more useful and understandable if you are newbie
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myFunction1() {
document.getElementById("radio2").disabled = true;
document.getElementById("radio3").disabled = true;
}
function myFunction2() {
document.getElementById("radio1").disabled = true;
document.getElementById("radio3").disabled = true;
}
function myFunction3() {
document.getElementById("radio2").disabled = true;
document.getElementById("radio1").disabled = true;
}
</script>
</head>
<body>
<div class="block">
<input onclick="myFunction1();" type="radio" id="radio1" value="Radio1" /><label>Radio1</label>
<input onclick="myFunction2();" type="radio" id="radio2" value="Radio2" /><label>Radio2</label>
<input onclick="myFunction3();" type="radio" id="radio3" value="radio3" /><label>radio3</label>
</div>
</body>
</html>
It's a working example according to your need. Cheers :)
Basically i'd like hide and show the radio buttons if the checkbox is checked or not, but with some conditions.
The first radio button needs to be checked by default even if hidden once the checkbox has been checked.
If the checkbox has been checked then show all the radio buttons and the user can choose another radio button if necessary.
But, if the checkbox is unchecked, set the radio button back to the first checked by default and hide all the radio buttons.
I tried to modify some solutions that i found, but without success :(
My HTML:
<input name="featured_ad" value="1" type="checkbox">condition</input>
<div class="buttons">
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>
</div>
Thanks a lot!
As we discussed does this work for you?
HTML:
<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition
<div class="buttons">
<input type="radio" name="ad_pack_id" value="497649" onclick="setcheckbox()">value 1<br>
<input type="radio" name="ad_pack_id" value="497648" onclick="setcheckbox()">value 2<br>
<input type="radio" name="ad_pack_id" value="497647" onclick="setcheckbox()">value 3<br>
</div>
JS:
function resetradio (checkbox) {
var buttons = document.querySelector('.buttons');
var radios = document.getElementsByName('ad_pack_id');
radios[0].checked = true;
if (checkbox.checked == true) {
buttons.style.display = 'block';
}
else {
buttons.style.display = 'none';
}
}
function setcheckbox () {
var checkbox = document.getElementsByName('featured_ad')[0];
if (checkbox.checked == false) {
checkbox.checked = true;
}
}
CSS:
.buttons {
display: none;
}
Fiddle: http://jsfiddle.net/dgqn5fc4/1/
You've got a few issues here. First of all, you need to make sure you close your input tags:
<input name="featured_ad" value="1" type="checkbox">condition</input>
<div class="buttons">
<input type="radio" name="ad_pack_id" value="497649">value 1</input>
<input type="radio" name="ad_pack_id" value="497648">value 2</input>
<input type="radio" name="ad_pack_id" value="497647">value 3</input>
</div>
You can then check your default radio button right in the html by adding checked="checked" to the appropriate radio element.
<div class="buttons">
<input type="radio" checked="checked" name="ad_pack_id" value="497649">value 1</input>
<input type="radio" name="ad_pack_id" value="497648">value 2</input>
<input type="radio" name="ad_pack_id" value="497647">value 3</input>
</div>
You can hide your radio buttons by default in your CSS:
.buttons {
display: none;
}
Then, you can show them using jQuery, and do your selections based on your condition:
$(document).ready(function(){
$("input[name='featured_ad']").on("change", function(){
var isChecked = $(this).prop("checked");
if(isChecked){
$(".buttons").show();
} else {
$(".buttons").hide();
$("input[name='ad_pack_id'][value='497649']").prop("checked", "checked");
}
});
});
Edit:
Here is a fiddle: http://jsfiddle.net/8q94Lvbo/
Do the following.
$('[name="featured_ad"]').on('change', function(){
var $first = $('[name="ad_pack_id"]').first();
var $rest = $('[name="ad_pack_id"]').slice(1);
if( $(this).is(':checked') ){
$first.prop('checked',true);
$first
.closest('span')
.hide();
$rest.prop({
'checked':false,
'disabled':false
});
} else {
$first
.closest('span')
.show();
$first.prop('checked',true);
$rest.prop({
'checked':false,
'disabled':true
});
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name="featured_ad" value="1" type="checkbox">condition
<div class="buttons">
<span><input type="radio" name="ad_pack_id" value="497649">value 1</span><br/>
<span><input type="radio" name="ad_pack_id" value="497648">value 2</span><br/>
<span><input type="radio" name="ad_pack_id" value="497647">value 3</span><br/>
</div>
You have to pass arguments to javaScript in quotes like onclick="Show_Div('Div_1')" not like onclick="Show_Div(Div_1)".
And for others requirement you can check the following html
<input type="checkbox" id="check" onclick="checkFun();"/>Your CheckBox<br/>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div('Div_1')" width="100px">
<p>
<input id="radio1" type="radio" onclick="Show_Div('Div_1')" class="cb1" onchange="cbChange1(this)" checked="checked"/>Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div('Div_2')" width="100px">
<p>
<input type="radio" id="radio2" onclick="Show_Div('Div_2')" class="cb1" onchange="cbChange1(this)" disabled >Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
You can apply following simple JS and jQuery to achive your goal
function checkFun(){
console.log("click");
var ch=$("#check");
if(ch.is(':checked')){
$("#radio2").attr("disabled",false);
}else{
$("#radio1").prop("checked", true);
$("#radio2").prop("checked", false);
$("#radio2").attr("disabled",true);
}
}
function Show_Div(Div_id) {
if(Div_id=="Div_1"){
$("#Div_1").show();
$("#Div_2").hide();
}else{
$("#Div_2").show();
$("#Div_1").hide();
}
}
function cbChange1(obj) {
var cb1 = document.getElementsByClassName("cb1");
for (var i = 0; i < cb1.length; i++) {
cb1[i].checked = false;
}
obj.checked = true;
}
I have multiple radio buttons generated in a php loop which looks something like this
while(){
<input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team1'].' " onclick="return disp()""><span>'.$team1.'</span>
<input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team2'].' "onclick="return disp()""><span>'.$team2.'</span>
<input type="radio" name="picks'.$x.'" value="draw" onclick="return disp()">
}
What I want to do
Display all selected radio buttons in a div on the bottom of page
My Code
var elmnts = document.getElementById("makePicksForm").elements
var lngth = document.getElementById("makePicksForm").length;
var div = document.getElementById("dispPicks");
for (var x = 0; x < lngth; x++) {
if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
div.innerHTML = elmnts[x].value;
}
}
My Problem
Only the value of first selected radio button is displayed in div, other radio buttons are ignored
My Question
Any idea how I can modify my javascript to display the values of ALL selected radio buttons?
Since you've tagged your question with jQuery, here is a jQuery solution. Run the snippet to see it work:
$(document).ready(function () {
$(':radio').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="foo1" />
<input type="radio" name="foo" value="foo2" />
<input type="radio" name="foo" value="foo3" />
<br/>
<input type="radio" name="bar" value="bar1" />
<input type="radio" name="bar" value="bar2" />
<input type="radio" name="bar" value="bar3" />
<br/>
<input type="radio" name="wow" value="wow1" />
<input type="radio" name="wow" value="wow2" />
<input type="radio" name="wow" value="wow3" />
<div id="dispPicks"></div>
You're using lngth in your for loop, but that's defined by getting an element by ID which should only be 1 element. Your loop will only run once that way...
Assuming the element with ID makePicksForm contains all your radio buttons, you need to get the length of the elements:
var elmnts = document.getElementById("makePicksForm").elements;
var div = document.getElementById("dispPicks");
for (var x = 0; x < elmnts.length; x++) {
if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
div.innerHTML += elmnts[x].value;
}
}
Also, you need to add the value to the innerHTML property, using +=
as a side note: your PHP loop is creating duplicate ID's, which will result in failures in your javascript code if you need to reference the elements...
Another jQuery-Fiddle
<input type="radio" id="bob" name="boys" value="Bob"><label for="bob">Bob</label><br>
<input type="radio" id="jim" name="boys" value="Jim"><label for="jim">Jim</label><br>
<input type="radio" id="pete" name="boys" value="Pete"><label for="pete">Pete</label><br>
<input type="radio" id="mary" name="girls" value="Mary"><label for="mary">Mary</label><br>
<input type="radio" id="jane" name="girls" value="Jane"><label for="jane">Jane</label><br>
<input type="radio" id="susan" name="girls" value="Susan"><label for="susan">Susan</label>
<h3><span id="boy">?</span> and <span id="girl">?</span></h3>
$("input[name=boys]").click(function () {
$("#boy").text($(this).val());
});
$("input[name=girls]").click(function () {
$("#girl").text($(this).val());
});
In the script below, how do I get the values of only radio buttons and checkboxes that have been selected and not all (provided a radio button and checkbox were selected).
Right now it gives me the values of all, whether selected or not, and also the submit button (which i dont need).
How do i do this? There'll be more checkboxes and radio buttons, i've used only 2 sets for this question.
<html>
<head>
<script type="text/javascript">
function DisplayFormValues()
{
var str = '';
var elem = document.getElementById('frmMain').elements;
for(var i = 0; i < elem.length; i++)
{
str += elem[i].value+"<br>";
}
document.getElementById('lblValues').innerHTML = str;
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain">
<INPUT TYPE="radio" NAME="r1" value="r1a">
<INPUT TYPE="radio" NAME="r1" value="r1b">
<INPUT TYPE="radio" NAME="r1" value="r1c">
<INPUT TYPE="checkbox" NAME="c1" value="c1a">
<INPUT TYPE="checkbox" NAME="c1" value="c1b">
<INPUT TYPE="checkbox" NAME="c1" value="c1c">
<input type="button" value="Test" onclick="DisplayFormValues();" />
</form>
<hr />
<div id="lblValues"></div>
</body>
</html>
Add the following test:
if(elem[i].checked)
str += elem[i].value+"<br>";
Also, if you use jQuery, the whole script is even simpler:
function DisplayFormValues(){
$("input:checkbox:checked").add("input:radio:checked")
.each(function(){
$("div#lblValues").append(this.value + "<br>");
});
}