Question

单选按钮的代码段是 -

<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.因此，我的一个单选按钮将始终被选中。最初选择任何一个单选按钮都不在我手中。

现在，对于表格，我想在选择第二个单选按钮时设置display: none，并在选择第一个单选按钮时设置display: visible。

我应该放哪个事件？我当然不能把 onclick 。

Answer 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>

Answer 2

您需要检查所选的无线电负载以及onchange。这意味着如果默认情况下选择了No，表格将被隐藏起来。

<强> jsFiddle Demo

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();
}

另一个选项是没有onload事件，你用PHP设置显示：

<table id="emailTable" <?php if(!$isPush) echo 'style="display:none"'; ?>><tr><td>...</td></tr></table>

Answer 3

您希望在用户选中单选按钮时执行某些操作，因此您需要绑定onchange事件的处理程序。

Answer 4

这里是小提琴...... 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(); }); })

Answer 5

我个人会看看onChange，这将捕捉所选值发生变化的情况。如果在jquery中执行此操作，我会执行以下操作：

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

请注意，如果项目是动态添加的，则应将bind更改为live。

Answer 6

你应该编写一个更改display属性的javascript函数，然后在2个地方调用它。

1-文档加载时。

window.onload = function（）{javascript_function（）; }

如果你有JQuery，你可以这样做：

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

2-当单选按钮发生变化时。

设置onchange="javascript_function"或使用JQuery。

$(document).ready(function(){
    javascript_function();
    $("#radio_id").change(javascript_function());
)};

Answer 7

这是一个考验。根据需要更改它

    <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')">

Answer 8

Onchange，例如（在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>

如何为已选择的单选按钮编写事件？

8 个答案: