We Keep Coding

How to correctly represent true / false when dealing with radio buttons?

I'm trying to wrap my head around this and trying to improve my Javascript ability. I am using ASP.NET Core MVC to create a basic web form and I've got Javascript that will run when a radio button is selected.
Razor
<div class="form-row">
<div class="form-group col-sm-4">
<label class="bold" asp-for="PhoneSetup"></label>
<br />
<input type="radio" asp-for="PhoneSetup" name="PhoneSetup" value="true" onclick="phoneSetupSelect()" /><label>Yes</label>
<input type="radio" asp-for="PhoneSetup" name="PhoneSetup" value="false" onclick="phoneSetupSelect()" /><label>No</label>
</div>
</div>
Javascript
<script>
function phoneSetupSelect() {
var formInput = document.getElementById("myForm");
var phoneSetupValue = formInput.PhoneSetup.value;
//alert(phoneSetupValue);
console.log('phoneSetupValue = ' + phoneSetupValue);
if (phoneSetupValue == 'true') {
document.getElementById('hiddenDiv').classList.remove("hidden");
}
else {
document.getElementById('hiddenDiv').classList.add("hidden");
}
}
</script>
Aside from the if condition shown in the script, I tried the following
if(phoneSetupValue == true) and if(phoneSetupValue)
with mixed results. The former does not work, despite the model property being of type bool and the latter DOES work, which I understand why. In that case, since the same script is attached to both radio buttons, the value being present on either will trigger the true condition.
I got it to work but I'm just confused as to why and if there are ways I can make this better and less "hacky" feeling.

asp.net radio button on click event without page load

My problem is pretty simple, but I am not able to fix it.
I have 2 radio buttons and a hidden text label. Once the first radio button is clicked, I want to show the hidden label, and when the second radio button is clicked, I want to hide it again - all this without reloading the page.
I am hoping this can be achieved by JavaScript, but unfortunately I don't know how.
Any help will be appreciated.
Thanks in advance.

Try the following simple example.
$(document).ready(function() {
$('input[type=radio][name=GName]').change(function() {
if (this.value == '1') {
$("#label").text("Yes");
}
else if (this.value == '2') {
$("#label").text("No");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input type="radio" name="GName" value="1"> Yes</input>
<input type="radio" name="GName" value="2"> No</input>
<p> <span id="label"> </p>

You can use jQuery to bind an onlick-Event handler
$('#firstcheckbox').click(function() {
//code goes here
});
$('#secondcheckbox').click(function() {
//code goes here
});

jQuery if/else based on input value

I have a list of questions that a person can answer yes or no to. At the end, I want to display the question, whether they answered yes or no, and a paragraph about the results. I'm having trouble getting my if/else statement to work.
HTML:
<ol>
<li id='q1'>
<span>Are any of your valuables visible from the street?</span>
<input type="checkbox" class="calc" name="street" value="-1" /> yes
<input type="checkbox" class="calc" name="street" value="1" /> no
<input type="checkbox" name="street" value="0" /> n/a
</li>
</ol>
<div class='darkBtn' id='results'>Get Results ></div>
JS:
$('#results').click(function(){
var q1 = $('li#q1 input:checkbox:checked.calc').val();
if (q1 == 1) {
console.log("You answered No");
} else {
console.log("You answered Yes");
}
});
I've tried every variation I can think of, but the console always prints out "You answered Yes".

It looks like you mean to use radio buttons instead of checkboxes. I put together a quick fiddle of your example using radio buttons.
$(function(){
$("#results").click(function(){
var val = $('input[name=street]:checked').val();
if(val == 1) {
console.log('no');
} else {
console.log('yes');
}
});
});
fiddle

First your checkboxes should not have the same name attribute.
Then you should grab the selected questions using:
$('li#q1 input[type="checkbox"].calc:checked')
Also it appears that you want radio boxes instead of check boxes, in which case you'd be able to use the same name
UPDATE: fiddle

Selected Checkbox disables the selection of another checkbox

I have a reason to use checkboxes instead of radio buttons so please don't suggest I use radio buttons but need to duplicate the functionality. However when I select the Yes checkbox, it disables the No checkbox for some reason. When no is selected I want to hide the div and deselect Yes, and the opposite when I select Yes I want to show the div and uncheck NO. The only way I can select NO when Yes is checked is to uncheck it.
Working demo Here
JS Fiddle not working Here
Javascript
function injure() {
if (document.getElementById("f2").checked == true) {
document.getElementById("LocFall").style.display="block";
document.getElementById("f1").checked = false;
} else {
if (document.getElementById("f1").checked == true) {
document.getElementById("LocFall").style.display="none";
document.getElementById("f2").checked = false;
}
}
}
CSS
#LocFall {
display:none;
}
HTML
<input type="checkbox" id="f1" name="" onclick="injure();">
<label for="f1"> No </label><BR>
<input type="checkbox" id="f2" name="" onclick="injure();">
<label for="f2"> Yes</label><BR>
<div id="LocFall">
Show some stuff
</div>

http://jsfiddle.net/6NN6s/14/
<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>
function injure(cmb) {
if (cmb.checked) {
if(cmb.id==="f2")
{ document.getElementById("LocFall").style.display = "block";
document.getElementById("f1").checked = false;
}
else
{
document.getElementById("LocFall").style.display = "none";
document.getElementById("f2").checked = false;
}
}
}
try this out, may be what you need.

In Fiddle change on the left in second drop-down list 'onLoad' to 'no wrap - in <head>'.

Split injure into a different function for each; if you choose No, then you cannot choose Yes because of the way your function is set up - the first condition will always evaluate as true.

The problem stems from not knowing which checkbox was actually clicked inside the function. As it is there's only two different ways the function can respond: one if f1 is checked and one if f2 is checked. The problem is there's actually more possible states that you're trying to represent.
State 1: Nothing checked, user clicks f1 or f2
State 2: f1 checked, f2 clicked
State 3: f2 checked, f1 clicked
Your code handles the first state fine but it can't deal properly with the second ones. If you split your code into two seperate functions to handle each box then you'll have all the necessary information to write correct decision logic.
There's also the states of clicking the same box, but they are simple and your code handles them already.

javascript & radio buttons [duplicate]

This question already has answers here:
Radio Button and an Input field
(3 answers)
Closed 8 years ago.
im trying to activate/disable a textinput by activating/disabling a radio button.
html:
<input name="test" type="radio" value="one" onclick="activate();"/>
<input class="" name="info" type="text" size="5" maxlength="5" disabled>
<input name="test" type="radio" value="two""/>
javascript:
function activate(){
document.forms[0].info.disabled = !document.forms[0].test[0].checked;
}
when u activate the 1st radio button, the input text should be activated. when u activate 2nd button, it should be disabled.
but this code doesnt work. does anyone know better?

You need to run the activate function again when the other radio button is clicked.

Try this:
window.onload=function() {
var rad = document.getElementsByName("test");
for (var i=0;i<rad.length;i++) {
rad[i].onclick=function() {
this.form.info.disabled=this.value!="one";
}
}