是這樣的我想做一個點選radion button然後根據你所點選的按鍵會計算出相應
的分數，畫面大致如下
我的前端大略如這段
<div class="row-flex">
<div class="col-label">
<label class="control-label"></label>
</div>
<div class="col-input">
<div class="icheck-row input-group-others">
@Html.RadioButtonFor(m => m.MOVE_HELP, "NO", new { id = "NO" })
<label for="NO">
0
</label>
@Html.RadioButtonFor(m => m.MOVE_HELP, "BED", new { id = "BED" })
<label for="BED">
0
</label>
@Html.RadioButtonFor(m => m.MOVE_HELP, "PERSON", new { id = "Person" })
<label for="Person">
0
</label>
@Html.RadioButtonFor(m => m.MOVE_HELP, "EQUIP", new { id = "Equip" })
<label for="Equip">
15
</label>
@Html.RadioButtonFor(m => m.MOVE_HELP, "FURNITURE", new { id = "Furniture" })
<label for="Furniture">
30
</label>
</div>
</div>
</div><!-- /.row -->
相關程式
public static string Move(string move)
{
if (move.ToUpper().Equals("NORMAL")) return "0";
else if (move.ToUpper().Equals("BED")) return "0";
else if (move.ToUpper().Equals("CANT")) return "0";
else if (move.ToUpper().Equals("WEAK")) return "15";
else if (move.ToUpper().Equals("HARD")) return "30";
return move;
}
只是它裡面html的寫法跟我的有點不同，所以我有點不太懂要怎麼改
所以能否為我示範一下大略怎麼改?謝謝。
已邀請的邦友 {{ invite_list.length }}/5
你都用html helper產生radio button
當然會長得不一樣啊....
請用瀏覽器按F12開啟開發者工具
看看你產出的html是什麼樣子
你就會寫了...
你好，我看了一下，還原後大概是長這樣
<div class="row-flex">
<div class="col-label">
<label class="control-label"></label>
</div>
<div class="col-input">
<div class="icheck-row input-group-others">
<input id="Fall_HistoryN" name="FALL_HISTORY" type="radio" value="N"/>
<label for="Fall_HistoryN">
0-無
</label>
<input id="Fall_HistoryY" name="FALL_HISTORY" type="radio" value="Y"/>
<label for="Fall_HistoryY">
25-有
</label>
</div>
</div>
</div><!-- /.row -->
只是我該怎麼寫，才會變成說選到value是N時會得到0，然後選到Y時得到25這樣?
tenno081
你可以模仿你貼的範例方法
所有的checkbox的class名稱設成一樣
然後用這句
$('.className:checked').val()
className是你設定的css class
感謝，最後我做出來的結果是這樣
$(function () {
$('.fn-back').on('click', function () {
function getValue(str) {
if (isNaN(str)) return 0;
else return parseInt(str, 10);
}
function calculateScore() {
var s1 = getValue($('input[name="FALL_HISTORY"]:checked').attr('data-value'));
var s2 = getValue($('input[name="SECOND_DISEASE"]:checked').attr('data-value'));
var s3 = getValue($('input[name="MOVE_HELP"]:checked').attr('data-value'));
var s4 = getValue($('input[name="IV_STATUS"]:checked').attr('data-value'));
var s5 = getValue($('input[name="MOVE"]:checked').attr('data-value'));
var s6 = getValue($('input[name="SPIRIT"]:checked').attr('data-value'));
var score = s1 + s2 + s3 + s4 + s5 + s6;
console.log(score);
$('#TOTAL_SCORE').val(score);
}
最後結果也確實如我所要，只是有新的一個問題
就是我想把顯示的方式從textbox改成label
所以我做了一些改變
JQ:
$('#TOTAL_SCORE').html(score);
html:
<label id="TOTAL_SCORE">TOTAL_SCORE</label>
這樣前端是照常運作，可是我要儲存時卻失敗，我看一下中斷點
我TOTAL_SCORE這個欄位沒有抓到任何值，但換回textbox卻能抓到值，請問這個我該如何處理?
tenno081form只會把<input>標籤裡面的value回傳而已<label>標籤並不會回傳
所以有個好方法是新增一個隱藏的<input type="hidden">
你在計算時同時傳給你的<label>和這個隱藏的<input>
這樣就能順便傳回去也不會顯示出來讓別人看到
我懂了，我做出來了，萬分感謝。
iThome鐵人賽
看影片追技術