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

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

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

4

8 回答 8

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 回答
1

您需要检查所选电台的 onload 以及 onchange。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();
}​

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

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

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

于 2012-11-27T11:34:56.430 回答
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 = function () { 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 回答
0

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>
于 2012-11-27T11:40:26.980 回答