0

これはjsfiddleの簡単な例のリンクです

$(document).ready(function(){
  $('input[type=checkbox]').live("click", function() {
    if($(this).attr('class') == 'color_checkboxes') {
      if($(this).attr('id') == 'is_checked') {
        $(this).removeAttr('id');
        $(this).attr('checked', false);
      } else {
        $('input[type=checkbox][class=color_checkboxes]').attr('checked', false);
        $(this).attr('checked', true).attr('id', 'is_checked');                
      }
    }
  })
});

</p>

目標は、1 つのチェックボックスをオンにすることです - ID 値を追加しis_checked、別のチェックボックスをクリックして、このチェックボックスに ID を追加し、IDを前のものにis_checked削除しますis_checked。

例 - チェックボックスをgreenにチェックし、次にblueにチェックし、次にもう一度greenにチェックします - 緑色のボタンはチェックされません - つまり、その理由はis_checked. 緑色のボタンをもう一度チェックしようとすると、すでに機能しています。

それはあまりユーザーフレンドリーな動作ではないので、何か方法/提案があれば、それを修正する方法をお尋ねしたいと思います.

ありがとう

4

5 に答える 5

1 
$(document).ready(function() {
    var checkboxes = $('.color_checkboxes:checkbox');

    checkboxes.click(function(e) {
        var clicked = $(this);

        checkboxes.not(clicked).removeAttr('id').attr('checked', false);

        if(clicked.attr('checked')) {
            clicked.attr('id', 'is_clicked');
        } else {
            clicked.removeAttr('id');
        }
    });
});

http://jsfiddle.net/xkMKk/1/

于 2012-04-17T23:51:45.747 に答える
1

ここで使用する必要radio buttonsがあるのは、チェックボックス付きのバージョンです。

$('input[type=checkbox].color_checkboxes').click(function() {
    if (this.checked)
        $(this).siblings().prop('checked', false);
});​

ライブデモ

于 2012-04-17T23:41:58.900 に答える
0

これは私がそれを行う方法です。

$(document).ready(function(){      

    $(document).on("click", ".color_checkboxes:checkbox", function() {
        $(".is_checked").prop("checked", false).removeClass("is_checked");
        $(this).addClass("is_checked");
    });      

});

</p>

まず、live は推奨されていないため、.live() の代わりに .on() を使用します。

その場合、ID の削除と追加を使用する代わりに、クラスを使用する方が賢明だと思います。そのために特別に作成された関数があるからです。複数のクラスを持つことが可能であることを忘れないでください！

.on() を使用すると、それをクラス ".color_checkboxes" (:checkbox でもあります) にバインドできます。

クリックすると、「is_checked」クラスを持つすべてのものをクロールし、チェックを外してから、クラスを削除します。

次に、クリックしたチェックボックスにクラス「is_checked」を追加します。

これがフィドルです。http://jsfiddle.net/Q8xMU/15/

乾杯。

于 2012-04-18T06:08:14.027 に答える
0

このようなもの。

<script>
  $("input[type='checkbox']").click(function(){
    $("#is_checked").removeAttr("id");
    $(this).attr("id","is_checked");
  });
</script>
于 2012-04-17T23:34:24.983 に答える
0

あなたはそれをたくさんリファクタリングすることができます。まず、推奨されていないため、 .change()through.on()にバインドする必要があります。.live()次に、すべてのチェックボックスを変数にキャッシュする必要があります。.prop()第 3 に、バージョン 1.6 以降では、プロパティの処理に の代わりに を使用する必要があり.attr()ます。次に、現在のチェックボックスの check プロパティを true に選択しながら、すべてのチェックボックスの checked プロパティを false にチェックするだけです。

このような：

$(document).ready(function() {

    var $checkboxes = $("input[type=checkbox]");

    $checkboxes.on("change", function() {

        $checkboxes.prop("checked", false);
        $(this).prop("checked", true);

    });

});
​

jsFiddle のデモを表示するには、ここをクリックしてください。

于 2012-04-17T23:41:30.523 に答える