web-dev-qa-db-ja.com

jqueryを使用してクリック時にラジオボタンをオフにする

ラジオボタンは、ページの更新時にのみオフになります

<input type="radio" name="test">
    1<input type="radio" name="test">2
   <input type="button" id="btn" />

$("#btn").click(function(){

$(':radio').each(function () {
        $(this).removeAttr('checked');
        $('input[type="radio"]').attr('checked', false);
    })

});

私はfiddlehttp://jsfiddle.net/8jKJc/220/ を作成しました

しかし、Bootstrapでは機能しません

jqueryhtmltwitter-bootstrapradio-buttonunchecked
15
DON

使用する - .prop の代わりに.attr：

$('input[type="radio"]').prop('checked', false);

[ デモ ]

15
Mohit Kumar

これを使って ：

_ $(this).prop('checked', false);
 //$('input[type="radio"]').attr('checked', false);
_

.prop()と.attr()を区別するために、これlinkを確認できます。 .attr()は、ほとんどの場合にブール値を返すDOM要素のプロパティに対して、_(name, id, class,etc..)_や.prop()などのHTML要素の属性にアクセスするのに適しています。

jQuery公式ページから：

たとえば、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、およびdefaultSelectedは、.prop（）メソッドを使用して取得および設定する必要があります。 jQuery 1.6より前のバージョンでは、これらのプロパティは.attr（）メソッドで取得できましたが、これはattrのスコープ内にはありませんでした。これらは対応する属性を持たず、単なるプロパティです。

5
Norlihazmey Ghazali

.prop（）組み込み関数を使用します。

$('input[type="radio"]').prop('checked', false);
3
user5259715

簡単に使用でき、次のことが役立ちます。

$("input:checked").removeAttr("checked");

更新された ここでフィドル を確認してください

2
ketan

JQuery> 1.5を使用する場合は、propではなくattrを使用する必要があります。

$('input[type="radio"]').prop('checked', false);

デモ ここ 。

詳細は here を参照してください。

2
Andrea Salicetti

.propは属性ではなくプロパティのみを設定します。

jQuery API

または、isを使用してこれを行うことができます

$("#btn").click(function(){
$("input[type='radio']").each(function() {
if($(this).is(':checked')){
  $(this).prop('checked',false);
   }
});
});
0
Varun

ヒント：

  • 変更機能が正しくありません
  • クリック機能を使用する
  • setTimeout（）は使用しないでください！
<style>
    .radio-button {
       display: block;
       position: relative;
       min-height: 34px;
       margin-bottom: 0px;
    }
    .radio-button input {
       position: relative;
       opacity: 1;
       cursor: pointer;
    }
    .radio-button span {
       position: absolute;
       height: 18px;
       width: 18px;
       background-color: #fff;
       border: 1px solid #222;
       border-radius: 2px;
       cursor: pointer;
    }
    .radio-button input:checked + span {
       background-color: #222;
    }
    .radio-button span:after {
       top: 9px;
       left: 9px;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #fff;
    }
</style>

<div class="question-row">
    <div class="radio-button">
        <input type="radio" name="1" value="1">
        <span></span>
    </div>
    <div class="radio-button">
        <input type="radio" name="1" value="2">
        <span></span>
    </div>
    <div class="radio-button">
        <input type="radio" name="1" value="3">
        <span></span>
    </div>
    <div class="radio-button">
        <input type="radio" name="1" value="4">
        <span></span>
    </div>
</div>

<script>
    $(document).on('click', '.radio-button span', function () {
        var questionRow = $(this).closest('.question-row')[0],
        input = $(this).closest('.radio-button').find('input')[0];
        $(questionRow).find('input').prop('checked', 
            false).removeAttr('checked');
        $(questionRow).find('span').not($(this)).removeClass('checked');
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
            $(input).prop('checked', false);
        } else {
            $(this).addClass('checked');
            $(input).prop('checked', true);
        }
    })
</script>
0
mojtaba ramezani