如何检查单选或复选框？

Question

I have this HTML code:

   <div id="f4" class="none">

   <h4>Jaký tarif chcete zvolit?</h4>
   <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1">Tarif 1</label>  <br>
   <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2">Tarif 2</label>  <br>
   <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3">Tarif 3</label>  <br>
   <h4>Co chcete aktivovat?</h4>
   <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br>
   <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label> <p></p>

   <input type="button" name="send" value="ODESLAT" onclick="vypisForm();">





   </div>

and this is part of vypisForm function:

var t1 = document.getElementById("t1").value;
var t2 = document.getElementById("t2").value;
var t3 = document.getElementById("t3").value;
var cc1 = document.getElementById("cc1").value;
var cc2 = document.getElementById("cc2").value;

if(t1.checked) {
   document.write("Zvolený tarif je: "+ t1 + "<br>");
   } else if(t2.checked) {
   document.write("Zvolený tarif je: "+ t2 + "<br>");
   } else {
   document.write("Zvolený tarif je: "+ t3 + "<p></p>");
   }

   document.write("Zvolili jste tyto služby:" + "<br>");
   if (cc1.checked) {
   document.write(cc1 + "<br>");
   } else if (cc2.checked) {
   document.write(cc2 + "<br>");
   } else if(cc1.checked && cc2.checked) {
   document.write(cc1 + "<br>");
   document.write(cc2 + "<br>");
   } else if(!cc1.checked && !cc2.checked) {
   document.write("Žádné");
   }

But it does not work.. Idea is that if that radio button is checked, write this and if that radio button is checked write another thing..

Same with the checkboxes, there are two of those..

Does anybody see what I do not?? Thanks

Answer 1

You're trying to test for checked on the value.

Instead of:

var cc1 = document.getElementById("cc1").value;

Use:

var cc1 = document.getElementById("cc1").checked;
if (cc1) {
    document.write(cc1 + "<br>");
}

Answer 2

Because both cc1 and cc2 have to be the checkboxes themsevles not their values:

var cc1 = document.getElementById("cc1");
//                                     ^^^ remove .value

Answer 3

您不需要document.getElementById的.value仅是该对象，因此取消该.value 。

Answer 4

document.getElementById("t1").value gets the value of the input, but it doesn't hold its checked status. Here is what you want to do.

var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var cc1 = document.getElementById("cc1");
var cc2 = document.getElementById("cc2");
if(t1.checked) {
   document.write("Zvolený tarif je: "+ t1.value + "<br>");
} else if(t2.checked) {
   document.write("Zvolený tarif je: "+ t2.value + "<br>");
} else {
   document.write("Zvolený tarif je: "+ t3.value + "<p></p>");
}

document.write("Zvolili jste tyto služby:" + "<br>");
if (cc1.checked) {
   document.write(cc1.value + "<br>");
} else if (cc2.checked) {
   document.write(cc2.value + "<br>");
} else if(cc1.checked && cc2.checked) {
   document.write(cc1.value + "<br>");
   document.write(cc2.value + "<br>");
} else if(!cc1.checked && !cc2.checked) {
   document.write("Žádné");
}