2 
<style>
    .chb
    {
        width: 30px;
    }
</style>

<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
    $(".chb").each(function() {
        $(this).change(function() {
            $(".chb").attr('checked',false);
            $(this).attr('checked',true);
        });
    });
</script>

<form action="demo_form.asp">
    <input type="checkbox" name="vehicle" value="Bike" class ="chb"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb"> I have a car <br>
</form>

上記のコーディングには、ラジオボタン機能を備えた2つのチェックボックスが含まれています。これは正常に機能します。しかし、jqueryを使用せずにjavascriptでこれを行う方法。これを達成する方法。

4

5 に答える 5

4

機能のみに関心があり、チェックボックスがたくさんある場合、これは簡単な解決策です。

<script>
    function func(checkBox) {
        var inputs = document.getElementsByTagName("input");
        for(var j = 0; j < inputs.length; j++) {
          if(inputs[j].type == "checkbox" && (inputs[j].className == "chb")){
             inputs[j].checked = false;
          }     
        }
        checkBox.checked = true;
    }
</script>

次に、以下のようにすべてのチェックボックスにイベントを追加onclickします。

<input type="checkbox" name="vehicle" value="Bike" class ="chb" onclick="func(this);"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb" onclick="func(this);"> I have a car <br>
于 2012-11-24T05:34:50.237 に答える
3

この機能は、クラス名がの入力にのみ必要であると想定していますchb。そうしないと、さらに多くのループが必要になります。

onclickここで説明した他のソリューションとは異なり、私のコードではすべてのチェックボックスに追加する必要はありません。

<!DOCTYPE html>
<html lang="en-CA">
<head>
    <meta charset="utf-8">
    <title> My page </title>
    <script>
    function doCrazyCheckRadioThing(v) {
        var checkboxes, i;

        for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) {
            checkboxes[i].checked = (checkboxes[i].value === v);
        }
    }

    function init() {
        var checkboxes, i;

        for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) {
            checkboxes[i].addEventListener('change', function() {
                doCrazyCheckRadioThing(this.value);
            }, false);
        }
    }

    document.addEventListener('DOMContentLoaded', init, false); 
    </script>
<body>
    <form action="demo_form.asp">
        <input type="checkbox" name="vehicle" id='bike' value="Bike" class="chb"> I have a bike<br>
        <input type="checkbox" name="vehicle" id='car' value="Car" checked="checked" class="chb"> I have a car <br>
    </form>

繰り返しになりますが、これを行うためにHTMLをコーディングする非常に非意味的な方法であることを強調する必要があります。

于 2012-11-24T05:38:36.460 に答える
3

たぶん、ケーキを持って食べてもいいでしょう。これが見た目だけで、CSS ソリューションを検討する用意がある場合は、コードにラジオ ボタンを配置して、チェックボックスのように見せることができます。

input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}​

JavaScript や jQuery は必要ありません。ただし、これがどの程度クロス ブラウザーに適しているかはテストしていません。間違いなく Chrome と Firefox で動作します。間違いなくIEでは動作しません

于 2012-11-24T05:43:37.750 に答える
2

詳細:おそらく最も洗練されたコードではありませんが、うまく機能し、目的に合わせてカスタマイズする方法についてのアイデアが得られます。

<input type="checkbox" name="chkFirst" onclick="CheckboxCheck('first')" />
<input type="checkbox" name="chkSecond" onclick="CheckboxCheck('second')" />

<script>
    function CheckboxCheck(checkbox)
    {
        var firstCheckbox = document.getElementById('chkFirst');
        var secondCheckbox = document.getElementById('chkSecond');

        if (checkbox == "first")
        {
            if (secondCheckbox.checked && firstCheckbox.checked == true)
            {
                secondCheckbox.checked = false;
            }
        }
        else
        {
            if (firstCheckbox.checked && secondCheckbox.checked == true)
            {
                firstCheckbox.checked = false;
            }
        }
    }
</script>
于 2012-11-24T05:29:35.820 に答える