Question

我想通过复选框隐藏/显示来显示具有不同标题的相同div。

$('#cbxShowHide').click(function() {
  this.checked ? $('#block').show(1000) : $('#block').hide(1000);
});

#block {
  display: none;
  background: #eef;
  padding: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide" />
<label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1" />
<label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2" />
<label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>

在上面的例子中单击复选框“显示/隐藏”我可以显示文本“这里有些文字”。

我想为第n个复选框执行此操作，以便我可以在第n次显示“某些文本”，例如“some text here1”，“some text here2”

Answer 1

参考this jsfiddle。我已将内容移到了div中的内容

private final SSLContext createSSLContext()
        throws Exception {

    CertificateFactory cf = CertificateFactory.getInstance("X.509");
    FileInputStream in = new FileInputStream("path to server certificate.pem"); // server certificate in PEM format
    KeyStore trustStore = KeyStore.getInstance("JKS");
    trustStore.load(null);
    try {
        X509Certificate cacert = (X509Certificate) cf.generateCertificate(in);
        trustStore.setCertificateEntry("server_alias", cacert);
    } finally {
        IOUtils.closeQuietly(in);
    }

    TrustManagerFactory tmf = TrustManagerFactory.getInstance("SunX509");
    tmf.init(trustStore);

    SSLContext sslContext = SSLContext.getInstance("SSL"); // TLS e.g.
    sslContext.init(null, tmf.getTrustManagers(), new SecureRandom());
    return sslContext;
}

希望这有帮助

Answer 2

您只能获取特定ID“cbxShowHide”的点击事件我改变了它，所以事件将来自所有被点击的输入

$('[type~=checkbox]').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

$('[type~=checkbox]').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block">Some text here</div>

Answer 3

首先，您需要使用类而不是ID，然后它将为每个复选框执行该功能，

其次请记住，for标签特定于ID，因此如果您将标签链接到复选框，请确保两者匹配。

希望这个例子有帮助

$('.checkbox').click(function(){
   if($(this).attr('id') == 'cbxShowHide')
   {
        $('#block').text('Some text here')
   }
   if($(this).attr('id') == 'cbxShowHide1')
   {
        $('#block').text('Some text here1')
   }
   if($(this).attr('id') == 'cbxShowHide2')
   {
        $('#block').text('Some text here2')
   }

    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" class='checkbox' id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" class='checkbox' id="cbxShowHide1"/><label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" class='checkbox' id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>

Answer 4

<强> 1。切换元素的文本

<强> fiddle

案例：您想要切换#block元素文本。小提琴使用type='radio'输入而不是type='checkbox'，因为您只有一个地方可以切换文本，因此当时只选择一个选项是更好的方法。< / p>

<强> 2。根据选中的复选框显示元素

<强> fiddle

案例：您希望根据复选框输入状态（已选中/未选中）隐藏/显示多个框。

在每个状态更改时，它会循环显示复选框并且：

对于每个选中的一个，它会选择具有相同编号的框，显示它
对于每个未经检查的，选择具有相同编号的框并隐藏

Answer 5

不是那么优雅，但我没有太多时间..我希望我得到你的意思

CSS

#block, #block1, #block2 {display:none;background:#eef;padding:10px;text-align:center;}

HTML

<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block"><span>Some text here</span></div>
<div id="block1"><span>Some text here 1</span></div>
<div id="block2"><span>Some text here 2</span></div>

JS

$('#cbxShowHide').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('#cbxShowHide1').click(function(){
    this.checked?$('#block1').show(1000):$('#block1').hide(1000);
});
$('#cbxShowHide2').click(function(){
    this.checked?$('#block2').show(1000):$('#block2').hide(1000);
});

Answer 6

试试这个Jsfiddle：jsfiddle.net/xs523nw8/6/

   $("input[type='checkbox']").click(function(){
       if($(this).is(":checked")){
      $(this).siblings("input[type='checkbox']").removeAttr("checked");
      $("#block").text('Some Text Here :'+$(this).index());
      $("#block").show(1000)
    }
    else{
      $("#block").hide(1000);
    }
   });

Answer 7

检查这个小提琴https://jsfiddle.net/tz5ror3s/

我在复选框中添加了一个类，并在它们上绑定了click事件并在块跨度内打印文本。

$('.cbxShowHide').click(function() {
    $('#block span').text('Some text here ' + $(".cbxShowHide:checked").length );
    $('#block').show();
});

如何通过复选框隐藏/显示显示具有不同标题的相同div

7 个答案: