Question

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

CREATE Procedure MATH 
@InNumber INT,  
@OutNumber INT OUTPUT 

AS
BEGIN

WHILE @InNumber <= 0
RETURN @OutNumber -1;

BEGIN 
  SET @OutNumber=((@InNumber)*(@InNumber+1))/2)
END

 PRINT @OutNumber;
END

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

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

我需要编写一个简单的jQuery来显示/隐藏章节，具体取决于所选的复选框。

这是我的jQuery：

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

然而这不起作用我也尝试这样做：

$(document).ready(function(){
    if ($('.navigationItem').is(':checked')){
        $($("chapter") + $('.navigationItem').val()).show();
    } else {
        $($("chapter") + $('.navigationItem').val()).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')

返回一个对象数组，因此要选择一个对象：

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

对元素使用相同的逻辑，而不是通过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使用复选框来隐藏/显示内容

3 个答案: