2013-08-23 25 views
-1

我正在嘗試瞭解表單構建。我有一種形式,我希望根據哪個單選按鈕被選中,將某些變量的值賦給特定的表單域。但是我的代碼總是默認第一個無線電選擇,不管我選擇哪一個。如果語句單選按鈕沒有指定變量

我試圖鏈'if'條件,如果/其他條件和改變變量名稱,但它沒有區別。

我也發現該代碼在JSfiddle(http://jsfiddle.net/GEZPU/1/)中不起作用,但我不確定它爲什麼說該函數沒有定義?

HTML

Input 1 
<select id="box0"> 
    <option>Tampa</option> 
    <option>Phoenix</option> 
</select> 
<br> 
<br>Input 2 
<select id="box1"> 
    <option>Bucs</option> 
    <option>Cards</option> 
</select> 
<br> 
<br>If option radios 
<br> 
<br> 
<input type="radio" id="box2" name="football" value="No Data">No Data 
<br> 
<br> 
<input type="radio" id="box3" name="football" value="No Playoffs">No Playoffs 
<br>Games to go? 
<input id="box4" size="10">Superbowl location? 
<input id="box5" size="10"> 
<br> 
<br> 
<input type="radio" id="box6" name="football" value="Yes Playoffs">Made Playoffs 
<br>Superbowl location? 
<input id="box7" size="10"> 
<p> 
    <input value="Write summary" onclick="writetext()" type="button"> 
    <br> 
    <form> 
     <textarea rows="35" cols="45" placeholder="Template" id="output"></textarea> 
    </form> 
    <br> 
</p> 

代碼

function writetext() { 
    var mytext = document.getElementById('output'); 
    var captext = ""; 
    // Checklist variables 
    var box_0 = $("#box0").val(); 
    var box_1 = $("#box1").val(); 
    captext += box_0 + "\n - " + box_1 + "\n "; 

    if ($('#box2').prop("checked ", true)) { 
     var box_margin = $("#box2").val(); 
     captext += "\nMargins: \n - " + box_margin + "\n "; 
    } 
    if ($('#box3').prop("checked ", true)) { 
     var box_margin2 = $("#box3").val(); 
     var box_margin_dist = $("#box4").val(); 
     var box_margin_site = $("#box5").val(); 
     captext += "\nMargins: \n - " + box_margin2 + "\n - Dist: " + box_margin_dist + "\n - margin " + box_margin_site + "\n "; 
    } 
    if ($('#box6').prop("checked ", true)) { 
     var box_margin3 = $("#box6 ").val(); 
     var box_margin_site3 = $("#box7 ").val(); 
     captext += "\nMargins: \n - " + box_margin3 + "\n - (Specify margin)" + box_margin_site3 + "\n "; 
    } 

    mytext.value = captext; 
} 
+0

您正在使用jQuery,將其用於一切。你的支票是錯誤的。這應該做你想要的,注意按鈕如何觸發的變化。 http://jsfiddle.net/T9HWD/2 –

回答

1
if ($('#box2').prop("checked ", true)) { 

總是正確的。。我認爲你試圖比較它是否設置爲true或false。

應該是

if ($('#box2').prop("checked ")) { 

它總是以避免內聯附加事件的一個好主意。使用javascript附加事件

也可以簡單地使用is(':checked')方法來檢查收音機是否被選中。

我發現你是在多個地方使用相同的jQuery對象。在這種情況下緩存它們會更好,因爲它會提高性能。

而且相同的代碼可重構了一下..

UPDATE

$('#write').click(write); 

function write() { 
    var mytext = document.getElementById('output'), 
     captext = "", 
     // box elements 
     $box_0 = $('#box0'), 
     $box_1 = $('#box1'), 
     $box_2 = $('#box2'), 
     $box_3 = $('#box3'), 
     $box_4 = $('#box4'), 
     $box_5 = $('#box5'), 
     $box_6 = $('#box6'), 
     $box_7 = $('#box7'), 
     // Checklist variables 
     box_0 = $box_0.val(); 
    box_1 = $box_1.val(); 

    captext += box_0 + "\n - " + box_1 + "\n "; 
    // All the radios have the same name. 
    // So only 1 radio will be checked at any point of time 
    // This would give you the radio that is checked 
    var $radio = $('input[type=radio][name=football]:checked'); 

    if ($radio.length) { 
     captext += "\nMargins: \n - " + $radio.val() + "\n "; 

     if ($radio.is($box_3)) { 
      captext += "\n - Dist: " + $box_4.val() + "\n - margin " + $box_5.val() + "\n "; 
     } else if ($radio.is($box_6)) { 
      captext += "\n - (Specify margin)" + $box_7.val() + "\n "; 
     } 
    } 
    mytext.value = captext; 
} 

Check Fiddle

+0

哦,我明白了。我沒有意識到'真實'一點讓它總是真實的,我認爲它檢查了這個爭論是否屬實。我改變了它,它就像我想要的那樣工作。在另一個說明中,鏈接多個「if或chain」if/else在一起會更好嗎? – user1837608

+0

@ user1837608 ..檢查更新的代碼 –

0

如果您在http://api.jquery.com/prop/看一看,你會發現,.prop (「checked」)返回true或false,而.prop(「checked」,true)將值「true」賦值給「checked」屬性。嘗試切換出來,看看會發生什麼。