1

ラジオボタンがチェックされているかどうかに基づいて、説明を非表示/表示するためのjquery/JSロジックをコーディングしようとしていました。ページの読み込み時にラジオ ボタンがオンになっている場合、そのラジオ ボタンに関連付けられている説明を読み込みます。ただし、いずれかのデフォルトのいずれかを選択/チェックする必要があります

ready() 内で .change メソッドと click メソッドを使用してコーディングしようとしました。しかし、成功しませんでした

私は 2 つのラジオ ボタンしか持っていません。私は Javascript/jquery の人ではありません。どんな入力でも大歓迎です。これは一例です

<div id="ServiceSelection">     
 <input type="radio" name="Service" checked="Checked" value="B"> Option 1
  <br>
 <input type="radio" name="Service" value="P"> Option 2
  <br>
  <div id="DivB" style="display:none" class="desc">B  Description goes here </div>
 <div id="DivP" style="display:none" class="desc">P Description goes here </div>    
</div>

編集された DIV:

<div id="ServiceSelection">     
<input type="radio" name="Service" checked="Checked" value="B"> Option 1
<br>
<div id="DivB" style="display:none" class="desc">B  Description goes here </div>
<input type="radio" name="Service" value="P"> Option 2
<br>
<div id="DivP" style="display:none" class="desc">P Description goes here </div>    
</div>

よろしくお願いします J

4

3 に答える 3

2 
if($('input[name=Service]').is(':checked')){ //is it checked?
    var v = $('input[name=Service]:checked').val(); //get the value
    $('div[id$='+v+']').show(); //target the end of selector, and match it to our value
}

$('input[name=Service]').on('click', function(){
   $(this).parent().find('div').hide(); //hide the divs...
   $('div[id$='+$(this).val()+']').show(); //show the div based on our value again..
});

フィドル

于 2013-03-29T22:44:20.883 に答える
1

私はお勧めします：

// hide the div elements with JavaScript, so they're visible to those
// users with JavaScript disabled:
$('#ServiceSelection div[id]').hide();

// select the radio input elements and bind to the change event
$('input:radio').change(function(){
    // find the element whose id is equal to 'Div' + the value of the radio,
    // show that div, hide the sibling div elements
    $('#Div' + this.value).show().siblings('div').hide();
// filter the radio elements to find the one that's checked, and trigger the change event
}).filter(function(){return this.checked; }).change();

JS フィドルのデモ。

参考文献:

于 2013-03-29T22:51:18.990 に答える
1

これを試して：

function ShowData(evt) {
    var val = $("input[name=Service]:checked").val();
    if (val == 'B') {
        $('#DivB').show();
        $('#DivP').hide();
    } else {
        $('#DivP').show();
        $('#DivB').hide();
    }
}

$('input[name=Service]:radio').change(ShowData);
ShowData();

デモはこちら

于 2013-03-29T22:43:54.077 に答える