jQueryラジオボタンClick

jQuery 11.1経由のラジオボタンクリックイベントに問題があります。 divをクリックすると、ラジオボタンの状態が最初にクリックされた状態に変わりますが、何もクリックしないと動作します。は、ここに私のコードのHTMLコードをここでjQueryラジオボタンClick

<section class="selection-box"> 

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="selection-box-title">Brand</div> 
    <div class="radioStyle clearfix selected brandSection"> 
     <input name="brandRadio" id="brandRadio" type="radio"> 
     <label class="selection-box-label col-lg-12"> 
     <span class="col-lg-6">Desktop </span> 
     <span class="col-lg-6 text-right">From $500 </span> 
     </label> 
    </div> 
    <div class="radioStyle clearfix brandSection"> 
     <input name="brandRadio" id="brandRadio" type="radio"> 
     <label class="selection-box-label col-lg-12"> 
     <span class="col-lg-6">Mac </span> 
     <span class="col-lg-6 text-right">From $500 </span> 
     </label> 
    </div> 


    </div> 
</div>

でjQueryのコード

<script> 
$(".brandSection").click(function() { 

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

    if ($('input[type="radio"]', this).attr('checked', 'checked') == true) { 
    $('brandSection').removeClass('selected'); 

    } 
    else { 
    $('.brandSection').removeClass('selected'); 
    $(this).addClass('selected'); 

    } 


});

私はその上で逃した任意の微調整はありますか？

出典

2016-10-28 John Abraham

jQueryバージョン11.1（バージョン3.1は、私がこれを書いているように、最新のバージョンが利用可能であると思います）を使用していないことを確かめています。万が一1.11.1を意味しましたか？そして、SOのユーザーが、あなたのコードが何をしているのか分からないと仮定しよう。可能な限りシンプルでわかりやすい方法で、コードに何をすべきかを説明してください。何に応じて？ –

ラジオボタンのIDは同じであってはなりません。 JavaScriptはidの最初のインスタンスに対してのみ反応します。 – KevinOrfas

あなたはクラスbrandSectionにタイプミスがあります。

if ($('input[type="radio"]', this).attr('checked', 'checked') == true) { 
    $('.brandSection').removeClass('selected'); 

    }

ベター文書準備文で

$(function(){ 
//your code here 
})

をあなたのコードをラップfind()

出典

2016-10-28 10:17:17 madalinivascu

オハイオ州私の悪い！ divをクリックしてもまだ動作しません。どんな解決策ですか？ –

を使用して、現在のクリックされた要素への入力の相対を選択試すことができます：

$(".brandSection").click(function() { 
 
    $(this).find('input[type=radio]').prop('checked', true); 
 

 
    $('.brandSection').removeClass('selected'); // duplicate lines 
 
    $(this).addClass('selected'); // not understanding for this line 
 
    // why you add class selected when the radio button is NOT clicked? 
 
     
 
});

.selected { 
 
    border: 1px solid #00f 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="selection-box"> 
 

 
<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <div class="selection-box-title">Brand</div> 
 
    <div class="radioStyle clearfix selected brandSection"> 
 
     <input name="brandRadio" id="brandRadio1" type="radio"> 
 
     <label class="selection-box-label col-lg-12"> 
 
     <span class="col-lg-6">Desktop </span> 
 
     <span class="col-lg-6 text-right">From $500 </span> 
 
     </label> 
 
    </div> 
 
    <div class="radioStyle clearfix brandSection"> 
 
     <input name="brandRadio" id="brandRadio2" type="radio"> 
 
     <label class="selection-box-label col-lg-12"> 
 
     <span class="col-lg-6">Mac </span> 
 
     <span class="col-lg-6 text-right">From $500 </span> 
 
     </label> 
 
    </div> 
 

 

 
    </div> 
 
</div>

出典

2016-10-28 10:24:03

brandSectionにクラスを選択させたい場合は、 '$（ '。brandSection'）の下にコード行を追加することができます。removeClass（ 'selected'）;' '$（this）.addClass（ 'selected'） ; ' – KevinOrfas

ありがとうございます。その働き。私は選択されたクラスのラジオボタンdivのbrandSectionをクリックして追加したいと思います。それは可能ですか？ –

@JohnAbraham更新を確認してください。 '$（ '。brandSection'）。removeClass（ 'selected'）;'すべての 'div.brandSection'から' selected'クラスを削除します。 '$（this）.addClass（ 'selected'）;'現在のdivに 'selected'クラスを追加します –

代わり.prop('checked', true)を使用してください。

$(".brandSection").click(function() { 
 
    $('input[name="brandRadio"]', this).prop('checked', true); 
 
    $(".brandSection").removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

.selected { color:red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="selection-box"> 
 

 
<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <div class="selection-box-title">Brand</div> 
 
    <div class="radioStyle clearfix brandSection"> 
 
     <input name="brandRadio" id="brandRadio" type="radio"> 
 
     <label class="selection-box-label col-lg-12"> 
 
     <span class="col-lg-6">Desktop </span> 
 
     <span class="col-lg-6 text-right">From $500 </span> 
 
     </label> 
 
    </div> 
 
    <div class="radioStyle clearfix brandSection"> 
 
     <input name="brandRadio" id="brandRadio" type="radio"> 
 
     <label class="selection-box-label col-lg-12"> 
 
     <span class="col-lg-6">Mac </span> 
 
     <span class="col-lg-6 text-right">From $500 </span> 
 
     </label> 
 
    </div> 
 

 

 
    </div> 
 
</div>

出典

2016-10-28 10:27:30 spicydog

まず第一に、あなたは、両方のラジオボタンに同じIDを使用しています。要素IDは常に一意である必要があります。第二に、正しい$('brandSection')

$('.brandSection')に以下を使用してください：ここで

$(".brandSection").click(function() { 

    var radButton = $(this).find('input[type=radio]'); 
    $('.brandSection').removeClass('selected'); 
    $('input[type=radio]').removeAttr('checked'); 
    $(radButton).attr('checked', 'checked'); 
    $(radButton).addClass('selected'); 

});

はあなたのコード内で起こることを望むものについてのいくつかの小さな推測に基づいて、私はお勧めしたいjsfiddle

出典

2016-10-28 10:31:17

次のとおりです。

// binding the anonymous function of the click() method 
 
// as the event-handler for the click event: 
 
$(".brandSection").click(function() { 
 

 
    // finding the descendant radio input (using 
 
    // plain JavaScript in this case since it's 
 
    // faster/cheaper than calling jQuery: 
 
    var radio = this.querySelector('input[type=radio]'); 
 

 
    // setting the checked property to (Boolean) true: 
 
    radio.checked = true; 
 

 
    // adding the 'selected' class-name to the clicked 
 
    // .brandSelection element: 
 
    $(this).addClass('selected') 
 
    // selecting the siblings of that element: 
 
    .siblings() 
 
    // and removing the 'selected' class from those elements 
 
    // (to ensure only one element is selected): 
 
    .removeClass('selected'); 
 

 
// filtering the collection of '.brandSection' elements to 
 
// find the one - if any - with the 'selected' class-name: 
 
}).filter('.selected') 
 
// triggering the 'click' event on that element, in order 
 
// that the appropriate radio-input shows up as selected 
 
// on page-load: 
 
.click();

.selected { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="selection-box"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="selection-box-title">Brand</div> 
 
     <div class="radioStyle clearfix selected brandSection"> 
 
     <input name="brandRadio" id="brandRadio" type="radio" /> 
 
     <label class="selection-box-label col-lg-12"> 
 
      <span class="col-lg-6">Desktop </span> 
 
      <span class="col-lg-6 text-right">From $500 </span> 
 
     </label> 
 
     </div> 
 
     <div class="radioStyle clearfix brandSection"> 
 
     <input name="brandRadio" id="brandRadio" type="radio" /> 
 
     <label class="selection-box-label col-lg-12"> 
 
      <span class="col-lg-6">Mac</span> 
 
      <span class="col-lg-6 text-right">From $500 </span> 
 
     </label> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</section>

JS Fiddle demo。

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

checked属性は、残念ながら– checkedプロパティを更新しません–：

あなたの元のコードでエラーがラインでした。

参考文献：

CSS：
- Attribute selectors。
はJavaScript：
- document.querySelector()。
- HTMLInputElement。
のjQuery：
- click()。

出典

2016-10-28 10:34:33

偉大な仲間。その作品は私が望むものです。再度、感謝します。 –

私は助けてうれしい！あなたの質問に対する回答の1つがあなたの問題を解決した場合は、その投票、またはそれらの回答があなたに最も役立った回答を受け入れることができることを念頭に置いてください（この回答か他のものかはあなたの選択です）。しかし、単にソリューションを指摘して、別の方法で問題を解決した場合は、自分の答えを投稿してソリューションを表示し、できるときはその答えを受け入れることを検討してください。 –

あなたは$（this）を使用してクラスとbrandSectionを持つように1行を追加することができます。

$(".brandSection").click(function() { 
     $(this).find('input[type=radio]').prop('checked', true); 

     $('.brandSection').removeClass('selected'); 
     $(this).addClass('selected'); 
});

出典

2016-10-28 10:35:19 KevinOrfas

答えて

関連する問題