Question

我有一个内部部分的表格基本上是这样的（由于它在主目录中的样式，它必须被布置 - 像这样）：

<div id="q38_q42">
    <ul id="q38">
        <li>Q38</li>
        <li>
            <input class="my_input" name="q38" type="radio" value="Yes"/>Yes
        </li>
        <li>
            <input class="my_input" name="q38" type="radio" value="No"/>No
        </li>
    </ul>
    <ul id="q39">
        <li>Q39</li>
        <li>
            <input class="my_input" name="q39" type="radio" value="Yes"/>Yes
        </li>
        <li>
            <input class="my_input" name="q39" type="radio" value="No"/>No
        </li>
    </ul>
    ...ETC.
</div>
<div id="q43_hidden">
    <p>This is hidden</p>
</div>

我希望只要用户在<div id="q38_q42">内点击“否”进行任何输入，就会检测到jQuery，并在另一个位置显示另一个div（默认隐藏）。基本上，如果任何输入为“否”，我需要显示隐藏的div，即使下一个问题是用户点击“是”。现在，如果用户在“否”输入后单击“是”，则会再次隐藏div。这是js：

function showDiv(div){$(div).slideDown();}
function hideDiv(div){$(div).slideUp();}

$(document).ready(function () {
    $('.my_input').click(function () {
        if ($(this).val() == 'No') {
            showDiv('#q43_hidden');
        } else {
            hideDiv('#q43_hidden');
        }
    });
});

这是一个JSFiddle：https://jsfiddle.net/82Lbhvjw/5/

Answer 1

从 ul 中删除名称，因为 ul 和输入具有相同的名称。 ul 不需要名称

<ul name="q38" id="q38">

<ul id="q38">

另外，你的问题有点令人困惑。在＆＃34; No＆＃34;

的情况下，你想为每一个添加一个div或div吗？

因此，修复html并为要检查的元素添加一个类......

<div id="q38_q42">
    <ul id="q38">
        <li>Q38</li>
        <li>
            Yes
            <input class="my_input" name="q38" type="radio" value="Yes" />
        </li>
        <li>
            No
            <input class="my_input" name="q38" type="radio" value="No" />
        </li>
    </ul>
    <ul id="q39">
        <li>Q38</li>
        <li>
            Yes
            <input class="my_input" name="q39" type="radio" value="Yes" />
        </li>
        <li>
            No
            <input class="my_input" name="q39" type="radio" value="No" />
        </li>
    </ul>
</div>
<div id="error_div" style="background-color:red;display:none;">You clicked No! </div>

现在，如果你想检查点击输入的值是否为＆＃34;是＆＃34;或＆＃34;否＆＃34;，只需使用

$(document).ready(function(){
    $('.my_input').click(function(){
        alert($(this).val() + " -- " + $(this).attr('name') )
    });
});

这将解决您的问题，以防您需要检查是否有任何＆＃34;否＆＃34;检查并显示隐藏的div

$(document).ready(function(){
    $('.my_input').click(function(){
        var has_error = false;
        $('.my_input').each(function(){
            if($(this).val() == "No" && $(this).prop('checked')){
                has_error = true;
            }
        });
        if(has_error==true){
            $("#error_div").show();
        }
        else{
            $("#error_div").hide();
        }
    });
});

在这里工作

https://jsfiddle.net/82Lbhvjw/8/

如果你想要

，你也可以使用$（＆＃34;输入：选中＆＃34;）

$(document).ready(function(){
    $('.my_input').click(function(){
        var has_error = false;
        $('input:checked').each(function(){
            if($(this).val() == "No"){
                has_error = true;
            }
        });
        if(has_error==true){
            $("#error_div").show();
        }
        else{
            $("#error_div").hide();
        }
    });
});

单击jQuery表单无线电输入检测

1 个答案: