0

我正在使用下面的代码在添加到输入的伪类“：checked”上显示或隐藏一个div（在我的例子中是复选框和单选按钮）。目前，它与复选框完美配合（div 的显示/隐藏正确切换）但是，一旦单击单选按钮，div 将显示，但在单击其他单选按钮时不会隐藏。

这是一个 JSFiddle 链接。

jQuery：

    $(document).ready(function(){
        // Hide hospitalInfo DIV
        $("#hospitalInfo").css("display","none");
        // Add onclick handler to checkbox w/id checkme
        $(".hospCheck").click(function(){
            // If checked
            if ($(".hospCheck").is(":checked")) {
                //show the hidden div
                $("#hospitalInfo").show("fast");
            } else {
                //otherwise, hide it
                $("#hospitalInfo").hide("fast");
            }
        });
    });

这是HTML：

    <input type="radio" name="ini_disposition" value="H" class="hospCheck" />
    <input type="radio" name="ini_disposition" value="S" />
    <input type="radio" name="ini_disposition" value="T" />

    <input type="checkbox"  class="hospCheck" name="er" value="Y">
    <input type="checkbox"  class="hospCheck" name="er" value="N">
    <div id="hospitalInfo">
      Text I want to hide or show.
    </div>

任何见解表示赞赏！

4

4 回答 4

2

单击另一个单选按钮时，不会调用该函数。利用

$("input[name='ini_disposition']").click(function(){

代替

$(".hospCheck").click(function(){
于 2013-04-29T18:33:06.053 回答
2

尝试将类 hospCheck 添加到所有单选按钮。

于 2013-04-29T18:29:41.063 回答
2

查看 Van Dessels（现名为 Yordi）的答案，但添加 name='er'

$("input[name='ini_disposition'], input[name='er']").click(function () {

也是。或者这样做：http: //jsfiddle.net/mbNTL/

$("input[type=checkbox], input[type=radio]").click(function () {

这有帮助吗？

于 2013-04-29T18:41:39.487 回答
1

在 click 函数内部，你不想引用 $(this) 而不是 $(".hospCheck") 吗？然后，这将引用被单击的特定单选按钮。

编辑：这个小提琴做你想要的吗？ http://jsfiddle.net/kvyZa/

$(document).ready(function(){
    // Hide hospitalInfo DIV
    $("#hospitalInfo").css("display","none");
    // Add onclick handler to checkbox w/id checkme
    $(".hospCheck").click(function(){
        // If checked
        if ($(".hospCheck").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck1").click(function(){
        // If checked
        if ($(".hospCheck1").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck2").click(function(){
          $("#hospitalInfo").hide("fast");
    });
});

编辑 2：试试这个小提琴：http: //jsfiddle.net/5Aevs/

    $(document).ready(function(){
    // Hide hospitalInfo DIV
    $("#hospitalInfo").css("display","none");
    // Add onclick handler to checkbox w/id checkme
    $(".hospCheck").click(function(){
        // If checked
        if ($(".hospCheck").is(":checked") || $(".hospCheck1").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck1").click(function(){
        // If checked
        if ($(".hospCheck").is(":checked") || $(".hospCheck1").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck2").click(function(){
          $("#hospitalInfo").hide("fast");
    });
});
于 2013-04-29T18:32:01.643 回答