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

Question

我的单选按钮代码 sn-p 是 -

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

那么我应该放置哪个事件？我当然不能点击。

Answer 1

您需要检查所选电台的 onload 以及 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 2

我认为这就是你想要的：

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

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

Answer 4

您应该编写一个更改显示属性的 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 5

这是一个测试。随心所欲地改变它

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

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>

Answer 7

我个人会查看 onChange，这将捕获所选值更改的情况。如果在 jquery 中执行此操作，我会执行以下操作：

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

请注意，如果项目是动态添加的，您应该将绑定更改为实时。

Answer 8

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


})