HTML、Javascriptでトグルボタンを作成する方法について質問

HTML、Javascriptでトグルボタンを作成する方法について質問です。

自分が考えた動作としては
ひとつのform内に複数のボタンを設置　初期値(表示)は"有効"
ボタンを押すと値(表示)が"無効"に変わる
もう一度押すと"有効"に変わる
これの繰り返しがしたい
というものです。

書いたコードは
<javascript部分>
function dspmsg(btnObject){
status = btnObject.value;

if(status=="有効"){
document.btnObject.value = "無効";
}else{
document.btnObject.value = "有効";
}
}
<html部分>
<form>
<input type="button" name="yuko_FLG1" value="有効" onclick="dspmsg(this)" />
<input type="button" name="yuko_FLG2" value="有効" onclick="dspmsg(this)" />
・・・・・
</form>

当然のことながら動きませんでした。
自分でも間違っていることはわかるのですが、修正の仕方がわかりません。
よろしくお願いします。

No.3 回答者： steel_gray 回答日時： 2010/04/23 18:54

既に解決しているし、要件としては全く不要なんだろうけど趣味で。

HTMLのフォームの部品でトグルするのってcheckbox。
なのでcheckboxをトグルボタンする方法を。
（checkboxは非表示のまま生きているので送信すれば'有効'の時はvalueの値、value値省略なら'on'を送信します）


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('input[name^="yuko_FLG"]').each(function(){
$(this).hide();
$('<input type="button" />').insertAfter($(this)).click(function(){
if($(this).prev().get(0).checked) {
$(this).val( '無効' );
$(this).prev().get(0).checked = false;
} else {
$(this).val( '有効' );
$(this).prev().get(0).checked = true;
}
});
$(this).next().val( ($(this).get(0).checked)?'有効':'無効' );
});
});
</script>

<form>
<input type="checkbox" name="yuko_FLG1" />
<input type="checkbox" name="yuko_FLG2" checked="checked" />
<input type="submit">
</form>

No.2 回答者： fujillin 回答日時： 2010/04/23 10:07

表示を変えればよいだけなら、

function dspmsg(elm) {
elm.value = elm.value=='有効'?'無効':'有効';
}

みたいなのでは？

この回答へのお礼

1番の方と同じく三項演算子を教えていただいてありがとうございます！
すばらしく単純でしたよね…
おかげさまで思ったとおりの実装ができました
ありがとうございました

お礼日時：2010/04/23 10:24

No.1 回答者： yambejp 回答日時： 2010/04/23 10:04

単純な話・・・

＞document.btnObject.value = "無効";

ではなく

btnObject.value = "無効";

で、いけます。名前をわたしているのではなくオブジェクトを渡しているので。

ちなみに三項演算子の方が楽そうですね

<script>
function dspmsg(btnObject){
btnObject.value = btnObject.value=="有効"?"無効":"有効";
}
</script>
<form>
<input type="button" name="yuko_FLG1" value="有効" onclick="dspmsg(this)" />
<input type="button" name="yuko_FLG2" value="有効" onclick="dspmsg(this)" />
</form>

この回答へのお礼

そうですよね…自分でもなんて単純なことがわからないんだと泣きました
三項演算子のことがすっかり頭になかったので、すごく簡単にできてうれしいです！
ありがとうございました！

お礼日時：2010/04/23 10:22