jQuery 使用复选框 hide/show 内容

Question

我有 6 个不同的复选框（一个示例）：

<input type="checkbox" class="navigationItem" onclick="showChapter(this)" value="1" checked="checked" >1

我有 6 个不同的章节（一个例子）：

<div id="chapter1"> </div>

我需要根据选中的复选框编写一个简单的 jQuery 到 show/hide 章节。

这是我的jQuery：

$(document).ready(function(){
    if ($('.navigationItem').is(':checked')){
        $($("chapter") + $('.navigationItem').val()).show();
    } else {
        $($("chapter") + $('.navigationItem').val()).hide();
    }
});

但是这不起作用我也试过这样做：

function showChapter(cb){
var x = cb.value;            
        if($('.navigationItem').is(':checked')){
            $("chapter"+x).show();
        } else {
            $("chapter"+x).hide();
        }            
}

但这也行不通。我刚刚开始学习 JavaScript 和 jQuery，非常感谢任何帮助我指明正确方向的人，谢谢！ :)

Answer 1

$(".navigationItem").change(function(e) {
  var chapter = $(this).val();
  if($(this).is(":checked")) {
    $("#chapter"+chapter).show();
  } else {
    $("#chapter"+chapter).hide();
  }
}

这应该可以解决问题。

Answer 2

$('.navigationItem')

returns 一组对象，所以要 select 一个对象你必须做：

$('.navigationItem').get( 0 ); //or the index you want

对元素使用相同的逻辑，而不是 select 通过 id，这样更容易

Answer 3

由于您正在使用 jQuery，因此您可以删除 onclick="showChapter(this)"。你只需要这个：

$('.navigationItem').on('change', function() {
    var dv = $('#chapter' + $(this).val());
    $(this).is(':checked') ? dv.show() : dv.hide();
});

jsfiddle DEMO

jQuery 使用复选框 hide/show 内容

jQuery using checkboxes to hide/show content

javascript

checkbox

jquery