点击时jQuery表单单选输入检测

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>

我想让 jQuery 检测用户在 <div id="q38_q42"> 内的任何输入单击“否”并在不同位置显示另一个 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 和 input 具有相同的名称。 ul 不需要名称

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

<ul id="q38">

另外，你的问题有点令人困惑。如果“否”，您想添加一个 div 还是为每个 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>

现在如果要检查点击输入的值是“是”还是“否”，只需使用

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

如果您需要检查是否选中了“否”，这将解决您的问题 并显示隐藏的 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/

如果你愿意，也可以使用 $("input:checked")

$(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();
        }
    });
});