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

Question

我有一个JS，如果从单选按钮中选择了“ 1”，则会显示一个测试字段。 如果选择“ 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

我想你想喜欢这个

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>

s

   $("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>

通过默认检查是否存在

Answer 3

您将在文档之后的第一行隐藏该字段。

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

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

您可以使用.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">