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
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 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());
});
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() { ... }.
JavaScript
<script>
function changeColor() {
var element = user.elements["group1"];
for (var i = 0; i < element.length; i++) {
if (element[i].checked == true) {
var newColor = element[i].value;
alert("hai");
document.getElementById("changeColor").style.background = newColor;
}
}
}
</script>
HTML
<div id="color">
<input type="radio" name="group1" id="color1" value="#990000" /><label for="color1">Red</label>
<input type="radio" name="group1" id="color2" value="#009900" /><label for="color2">Green</label>
<input type="radio" name="group1" id="color3" value="#FFFF00" /><label for="color3">Yellow</label><br><br><br>
<button onclick="changeColor()">Change</button>
The above HTML and JavaScript code is fine when I click on the radio button the background color is changed. It is working properly. However, my problem is that after the color change the browser will automatically refresh, which I do not want.
After click on submit button the onclick event will call. So if you send boolean value return false then the page is not submit here is code i am using return false;
<script>
function changeColor() {
var element = user.elements["group1"];
for (var i = 0; i < element.length; i++) {
if (element[i].checked == true) {
var newColor = element[i].value;
document.getElementById("changeColor").style.backGround = newColor;
return false;
}
}
}
</script>
Change the onlick event add return before your changeColor() function
<button onclick="return changeColor();">Change</button>
I highly suggest you use jQuery:
HTML
<button id="btnColor">Change</button>
jQuery:
$('#btnColor').live('click', function(e) {
e.preventDefault();
$('#changeColor').css('background-color', $('input:radio[name=group1]:checked').val());
});
You could wrap the radio-buttons with a form, like this, leaving the button outside:
<form name="form_radiobuttons">
<input type="radio" name="group1" id="color1" value="#990000" /><label for="color1">Red</label>
<input type="radio" name="group1" id="color2" value="#009900" /><label for="color2">Green</label>
<input type="radio" name="group1" id="color3" value="#FFFF00" /><label for="color3">Yellow</label><br><br><br>
</form>
<input type="button" onclick="changeColor()">Change</button>
This way the form won't be submitted when you click the button.
Its looks like your button is the only button in the form so the browser is thinking its the submit button for the form.
As pointy says you can add a type to the button, add you onclick function to a different element such as a link (with an anchor not an actual link of course otherwise you will get the same problem) or move the button outside of the form.
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>");
});
}