0

ラジオボタンの私のコードスニペットは - 

<input type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>
<table id="emailTable"><tr><td>...</td></tr></table>

isPushの値は0 または 1 になります。そのため、ラジオ ボタンの 1 つが常に選択されます。そして、最初にラジオボタンのいずれかを選択することは、私の手にありません。

さて、テーブルについては、display: none2番目のラジオボタンが選択されdisplay: visibleたときと最初のラジオボタンが選択されたときに設定したいと思います。

では、どのイベントを配置すればよいでしょうか。私は確かにonclickを置くことはできません。

4

8 に答える 8

1

選択したラジオのオンロードとオンチェンジを確認する必要があります。これは、Noデフォルトで が選択されている場合、最初からテーブルが非表示になることを意味します。

jsFiddle デモ

function checkRadio()
{
        var tbl = document.getElementById("emailTable");

        if(document.getElementById("isPushYes").checked)
        {
           tbl.style.display = "";
        }
        else
        {
            tbl.style.display = "none";
        }   
}

window.onload = function()
{
    document.getElementById("isPushYes").onchange = checkRadio;
    document.getElementById("isPushNo").onchange = checkRadio;

    checkRadio();
}​

もう 1 つのオプションは、onload イベントを使用しないことです。PHP で表示を設定します。

<table id="emailTable" <?php if(!$isPush) echo 'style="display:none"'; ?>><tr><td>...</td></tr></table>
于 2012-11-27T11:49:54.283 に答える
1

私はこれがあなたが望むものだと思います：

<label><input type="radio" name="myradio" value="1" checked="true" onchange="hideActive(this.name);" /> radio 1</label>
<label><input type="radio" name="myradio" value="2" onchange="hideActive(this.name);" /> radio 2</label>
<label><input type="radio" name="myradio" value="3" onchange="hideActive(this.name);" /> radio 3</label>
<script type="text/javascript">
    function hideActive(radioGroupName) {
        var all = document.getElementsByName(radioGroupName);
        for(var n = 0; n < all.length; n++) {
            if(true === all[n].checked) {
                all[n].setAttribute('style', 'display: none;');
            }
            else {
                all[n].removeAttribute('style');
            }

        }
    }

    hideActive('myradio');
</script>

jqueryをサポートしている場合は、これを試してください

<label><input type="radio" name="myradio" value="1" checked="true" /> radio 1</label>
<label><input type="radio" name="myradio" value="2" /> radio 2</label>
<label><input type="radio" name="myradio" value="3" /> radio 3</label>
<script type="text/javascript">
    jQuery(function() {
        var all = jQuery('input[name=myradio]');
        var change = function() {
            all
                .show()
                .filter(':checked').hide();
        };
        all.change(function(){
            change();
        });

        //call init
        change();


    });
</script>
于 2012-11-27T11:38:44.340 に答える
0

ラジオ ボタンがユーザーによってチェックされたときに何らかのアクションを実行する必要があるため、onchangeイベントのハンドラーをバインドする必要があります。

于 2012-11-27T11:34:56.430 に答える
0

変更時、たとえば (JQuery で):

$('input[name="isPush"]').change(function() {
// your code
});

または：

<input onchange="myFunction();" type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input onchange="myFunction();" type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>
于 2012-11-27T11:40:26.980 に答える
0

ここにフィドルがあります.. http://jsfiddle.net/vfuV5/2/

例えば：

if($('input:radio[name="isPush"]:checked').val() == 'Yes')  // used yes u can use 1 here
{
        $('#emailTable').show();                            
}else{
    $('#emailTable').hide();
}

$("input[name='isPush']").change(function() {
  if($('input:radio[name="isPush"]:checked').val() == 'Yes')  // used yes u can use 1 here
  {
        $('#emailTable').show();                            
  }else{
    $('#emailTable').hide();
  }
});

また

関数を作る

function checkRadioValue()
{
    if($('input:radio[name="isPush"]:checked').val() == 'Yes')  // used yes u can use 1 here
    {
        $('#emailTable').show();                            
    }else{
       $('#emailTable').hide();
    }
}

document.ready および onchange 関数でこの関数を呼び出します

$(document).ready(function(){
    checkRadioValue();
    $("input[name='isPush']").change(function() {
          checkRadioValue();
    });


})
于 2012-11-27T11:38:59.827 に答える
0

私は個人的に onChange を調べます。これは、選択した値が変更される機会をキャッチします。jqueryでこれを行う場合、私は次のようにします：

$('input[type=radio][name=isPush]').bind('change', function(e){
 console.log('We had a change');
});

アイテムが動的に追加される場合は、バインドをライブに変更する必要があることに注意してください。

于 2012-11-27T11:39:55.723 に答える
0

表示属性を変更する JavaScript 関数を作成し、それを 2 か所で呼び出す必要があります。

1- ドキュメントがロードされたとき。

window.onload = 関数 () { javascript_function(); }

JQueryをお持ちの場合、これを行うことができます：

$(document).ready(function(){
    javascript_function();
)};

2-ラジオボタンに変更があった場合。

を設定するonchange="javascript_function"か、JQuery を使用します。

$(document).ready(function(){
    javascript_function();
    $("#radio_id").change(javascript_function());
)};
于 2012-11-27T11:40:01.797 に答える
0

そのテストです。好きなように変更してください

    <script type="text/javascript">
function fnc(myid,otherid)
{
if(document.getElementById(myid).checked)
{document.getElementById(otherid).disabled='disabled';}
}
</script>

<input type="radio" name="isPush" id="isPushYes" onchange="fnc(this.id,'isPushNo')">
<input type="radio" name="isPush" id="isPushNo" onchange="fnc(this.id,'isPushYes')">
于 2012-11-27T11:40:03.547 に答える