Question

好的，这是我的问题，以及我所有的'脏'代码。这不是我的生产代码，只是试着让它在当下工作。

基本上我需要的是当用户选择Not Ok单选按钮时，它会显示该独特集合的textarea，当我选择Not Ok时，它会立即显示该文本区域，它为所有条目提供textarea，现在是目前从mysql数据库动态生成的大约13组问题。我有一种感觉，它必须做一些独特的id，现在我的代码在错误的位置，或者根本就不存在。非常感谢任何帮助。

<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>Vehicle Check Information</h3>
<?php
$query = mysql_query("SELECT * FROM vehicle_q");
while($row = mysql_fetch_array($query)) {
    $q_title = $row['title'];
    $q_id = $row['id'];
?>

<div data-role="fieldcontain" style="border:0;">
<fieldset data-role="controlgroup">
<legend><?php echo $q_title; ?>:</legend>

<input type="radio" name="help[]" id="checkbox-1a" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>

</fieldset>

<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">

<script>
$(document).ready(function(){
$(":radio:eq(1)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$(":radio:eq(0)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>

<fieldset data-role="fieldcontain">
<label for="<?php echo $q_title; ?>_t">Explain the Deficiency(If any):</label>
<textarea name="text_a[]" id="<?php echo $q_title; ?>_t"></textarea>
</fieldset>
</div>
</div>
<input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />

<?php
}
?>

</div>

Answer 1

我发现基于无线电值显示隐藏元素的最简单方法是根据元素的id（您已经拥有）提供onchange事件。在您的情况下，由于您只有两个基于相同名称的无线电，最简单的方法是简单的if / else语句。类似的东西：

<script type="text/javascript">
$(function(){
    $('#checkbox-1a').change(function(){
        if($(this).attr('checked')){
            $('#hidden-text-<?php echo $q_id;?>').hide(500);
        }else{
            $('#hidden-text-<?php echo $q_id;?>').show(500);
        }
    });
});
</script>

我们在#checkbox-1a被更改时的状态：如果元素被选中（选中），则执行某些操作（在您的情况下隐藏某些内容），否则执行其他操作（在您的情况下显示某些内容）。

Answer 2

尝试类似：

<div data-role="collapsible" data-theme="b" data-content-theme="c">
    <h3>Vehicle Check Information</h3>
    <?php
    $query = mysql_query("SELECT id,title FROM vehicle_q");
    while($row = mysql_fetch_array($query)) {
        $q_title = $row['title'];
        $q_id = $row['id'];
    ?>
    <div data-role="fieldcontain" style="border:0;" class="groupings">
        <fieldset data-role="controlgroup">
            <legend><?=$q_title?>:</legend>
            <input type="radio" name="help[]" id="checkbox-<?=$q_id?>-1a" value="Ok" />
            <label for="checkbox-<?=$q_id?>-1a">Ok</label>
            <input type="radio" name="help[]" id="checkbox-<?=$q_id?>-2a" value="Not Ok" />
            <label for="checkbox-<?=$q_id?>-2a">Not Ok</label>
        </fieldset>
        <div id="hidden_text-<?=$q_id?>" class="hiddenText" style="display:none;">
            <fieldset data-role="fieldcontain">
                <label for="<?=$q_title?>_t">Explain the Deficiency(If any):</label>
                <textarea name="text_<?=$q_id?>_a[]" id="<?=$q_title?>_t"></textarea>
            </fieldset>
        </div>
    </div>
    <input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />
    <?php
    }
    ?>
</div>
<script>
    $(document).ready(function(){
        $(".groupings input:radio").click(function(){
            if (this.value == "Ok") {
                $(this).parent().next('.hiddenText').show(500);
            } else {
                $(this).parent().next('.hiddenText').hide(500);
            }
        });
    });
</script>

这是未经测试的，但脚本只需要声明一次，它将应用于相对于单选按钮的其余部分。

Answer 3

其他2个答案是解决问题的方法。作为一方，这可能是它发生的原因。当你使用 -

$(":radio:eq(1)").click(function()
$(":radio:eq(0)").click(function()

您正在使用点击侦听器，该侦听器仅检查页面上是否单击了“任何”单选按钮。因此，任何具有1索引位置的按钮都会使每个$(":radio:eq(1)").click(function()执行。

编辑 -

您可能希望更改单选按钮id，因为（1）当您使用每个while()循环重复它们时它们不会是唯一的，并且（2）您可以使用它来检查如果点击了特定的无线电按钮。

尝试将其更改为 -

...
<input type="radio" name="help[]" id="checkbox-1a-<?php echo $q_id; ?>" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a-<?php echo $q_id; ?>" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>

</fieldset>

<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">

<script>
$(document).ready(function(){
$("#checkbox-2a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$("#checkbox-1a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>

使用带有jquery mobile的单选按钮显示/隐藏div

3 个答案: