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"> 中单击 "No" 进行任何输入并显示另一个 div（默认情况下隐藏) 在不同的位置。本质上，如果任何输入是 "No"，我需要显示隐藏的 div，即使用户单击下一个问题 "yes"。现在，如果用户在 "no" 输入后单击 "Yes"，它会再次隐藏 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">

另外，你的问题有点令人费解。在 "No" 的情况下，您想为每个人添加一个 div 还是一个 div？

因此，修复 html 并向要检查的元素添加 class...

<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>

现在如果你想检查点击输入的值是"Yes"还是"No"，只需使用

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

这将解决您的问题，以防您需要检查是否已选中任何 "No" 并显示隐藏的 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();
        }
    });
});

jQuery 单击表单单选输入检测

jQuery form radio input detection on click

html

forms

jquery

radio-button