Question

如果从单选按钮中选择“1”，我有一个显示测试字段的JS。并且如果选择“0”则隐藏。如果我希望文本字段在数据库中的值为“1”时默认可见，则文本字段从头开始隐藏但不起作用。

JS

$(document).ready(function() {
        $("#send_to_yes").hide();
        $("input:radio[name=\'article\']").change(function() {  
                if(this.value == \'1\' && this.checked){
                    $("#send_to_yes").show();
                }
                else {
                    $("#send_to_yes").hide();
                }
        });
});

HTML

Yes <input type="radio" name="article" value="1"> 
No <input type="radio" name="article" value="0">
<div id="send_to_yes">
       <b>Number</b> <br><input type="text" name="number"><br><br>
</div>

CSS

#send_to_yes {
        display: none;
}

“1”和“0”来自数据库。使用此代码，我需要按“是”，然后出现文本字段。即使选中“是”，我也要按它。如果默认选中“1”（是），我希望它可见。

Answer 1

我想你想要this

HTML

Yes <input type="radio" name="article" value="1" checked='checked'> 
No <input type="radio" name="article" value="0">
<div id="send_to_yes">
       <b>Number</b> <br><input type="text" name="number"><br><br>
</div>

的js

   $("input[type=radio]").change(function() {  
        if($(this).prop('value') == '1'){
                $("#send_to_yes").show();
            }
            else {
                $("#send_to_yes").hide();
            }
    });

Answer 2

您可能还需要check/uncheck单选按钮和hide/show基于数据库值的div。

Yes <input type="radio" name="article" value="1" <?php if($value == 1){ echo 'checked'; } ?>> 

No <input type="radio" name="article" value="0" <?php if($value == 0){ echo 'checked'; } ?>>

<div id="send_to_yes" <?php if($value == 0){ echo 'style="display:none"'; } ?>>
       <b>Number</b> <br><input type="text" name="number"><br><br>
</div>

FIDDLE WITH YES CHECKED BY DEFAULT

Answer 3

您正在使用document.ready：

之后的第一行隐藏字段

$("#send_to_yes").hide();

因此，无论是否默认设置为YES，该字段都将被隐藏。如果您希望自动显示，则需要在页面加载后触发更改事件。

您可以使用.toggle（）函数简化隐藏/显示。您可以根据数据库为单选按钮返回的值来定义字段的初始加载。

$(document).ready(function() {

    <?php
        if($radioValueFromDb == 1) {
           echo <<<JAVASCRIPT
               $("#send_to_yes").show();
JAVASCRIPT;
        } else {
           echo <<<JAVASCRIPT
               $("#send_to_yes").hide();
JAVASCRIPT;
        }
    ?>

    $('.clickIt').bind('click', function(){
        $("#send_to_yes").toggle();
    });

});

稍微更改HTML：

Yes <input type="radio" name="article" class='clickIt' value="1"> 
No <input type="radio" name="article" class='clickIt' value="0">

JS：根据单选按钮问题显示/隐藏文本字段

3 个答案: