0

ユーザーがリンクをクリックできるように、いくつかのラジオ ボタンをチェックしたい (それ以外の場合は、アラートをアピールする必要があります)。

ここにコードがあります

<html>
<head>
</head>
<body>
<a href="http://www.aerosoft.de" id="a_next">aerosoft.de</a>

            <li class="radiobutton"><span class="name">Struct. Temp. Indic.> 38°C -not exceed 55°C</span>
            <input name="1" type="radio" value="other" /></li>
            <li class="radiobutton"><span class="name">Airplane Documents - check </span>
            <input name="2" type="radio" value="other" /></li>
            <li class="radiobutton"><span class="name">Flight Control Lock - removed</span>
            <input name="3" type="radio" value="other" /></li>
</body>
</html>

ユーザーは、リンクを機能させるために 3 つのラジオボタンをすべてチェックする必要があります。そうしないと、2 つのラジオボタンをチェックするだけで、リンクをクリックするとアラートが表示されます。

誰かが助けることができれば素晴らしいだろう:/

ファビアンに挨拶

4

3 に答える 3

2

リンクのクリック イベントを処理します。ラジオをループし、チェックされていないものがある場合はアラートを表示し、false を返してクリックのデフォルト アクションをキャンセルします (つまり、ナビゲーションをキャンセルします)。

window.onload = function() {
    document.getElementById("a_next").onclick = function(e) {
        if (!e) e = window.event;
        var els = document.getElementsByTagName("input"),
            i;
        for (i=0; i < els.length; i++) {
            if (!els[i].checked) {
                alert("Your message here.");
                e.returnValue = false;
                return false;
            }
        }
    };
};

デモ: http://jsfiddle.net/t9wqc/

于 2012-08-02T06:10:47.460 に答える
0

jQuery を使用できる場合は、はるかにクリーンです。

ここで完全な例を参照してください

<a href="#">aerosoft.de</a>


var link = "http://www.aerosoft.de" ;

$('input').change(function(){
   var allChecked = $('input:checked').length == 3;

    if(allChecked ){
      $('#a_next').attr('href',link).removeClass('disabled');
    }
    else{
      $('#a_next').attr('href','#').addClass('disabled');
    }             
});​
于 2012-08-02T06:01:01.797 に答える
0

jQueryが使えるなら、

EDITED：（ コメントの後、前の回答にはエラーがあります）

$(document).ready(function() {
    $('#a_next').click(function(e){                 
        $('input[type="radio"]').each(function(){
            if(!$(this).prop('checked')) {
               alert('Check all radios first');
               e.preventDefault();  // to stop anchor jumping to url
               return false;      // to break .each
            }
        }); 
    });
});

デモ </p>

于 2012-08-02T06:13:38.280 に答える