Question

<div class="Pizzas container" id="checkbox_pizza">
    <h1>Kies uw Pizza.</h1>
    <form id="Pi">
        <input type="checkbox" name="P1" id="g"> &euro;6,00 -Margherita (Kaas en tomaten)
        <br/>
        <input type="checkbox" name="P2" id="h"> &euro;7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
        <br/>
        <input type="checkbox" name="P3" id="i"> &euro;7,50 -Salami (kaas, tomaten en salami)
        <br/>
        <input type="checkbox" name="P4" id="j"> &euro;7,50 -Prosciutto (tomaten, kaas, ham)
        <br/>
        <input type="checkbox" name="P5" id="k"> &euro;7,00 -Funghi (tomaten, kaas, champions)
        <br/>
        <input type="checkbox" name="P6" id="l"> &euro;8,00 -Tonno (tomaten, kaas, tonijn, ui)
        <br/>
        <input type="button" id="knop" value="button" />
    </form>
</div>

<div class="container" id="Boxx">
    <div id="ingrediënten">
        <div>
            <h1>Kies extra ingredienten</h1>
        </div>
        <div id="ingp1"></div>
        <div id="ingp2"></div>
        <div id="ingp3"></div>
        <div id="ingp4"></div>
        <div id="ingp5"></div>
        <div id="ingp6"></div>
        <input type="button" id="knop2" value="Totaal" />
    </div>
</div>

P1

所以我遇到的问题是当我查看P6到ingp1中的一个或多个是否会被检查时，它会显示所有6个ID为ingp6到ingp1的div 。我希望它在检查P1时显示ingp3，在检查P3时显示sys.traces。你懂了。我该怎么做（小事我只允许使用javascript和jquery）。

Answer 1

试试这个

 for (var q = 1; q <= 6; q++) 
 {
    if ( $( 'input[ name = "P' + q + '"]').is(":checked") )
    {
       $( 'div#ingp' + q ).show();
    } 
 }

Answer 2

$("#button").click(function () {
    $('input[name^=P]').each(function () {
        var idx = this.name.replace('P', '');
        $('div#ingp' + idx).toggle(this.checked);
    });
});

用文字

为<input>以name开头的每个'P'，
找到具有正确ID的关联<div>
根据是否选中<input>来切换其可见性

Answer 3

首先为表单中的元素和容器中的div添加一个公共类名，因为我已经给出了test1，test2等。

$('document').ready(function() { 
    var test
	$("#Pi input[ type = 'checkbox']").click(function() { 
		var test = this.className
		if ( this.checked == true )
		{
		   $('#ingredienten .'+test).show()
           console.log($('#ingrediënten .'+test))
		} 
		else
		{
			$('#ingrediënten .'+test).hide()
		}
	})
 })

<html>
  <head>
<script   src="https://code.jquery.com/jquery-1.12.4.js"   integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="   crossorigin="anonymous"></script>
    </head>
<body>
<div class="Pizzas container" id="checkbox_pizza">
    <h1>Kies uw Pizza.</h1>
    <form id="Pi">
        <input type="checkbox" class = "test1" name="P1" id="g"> &euro;6,00 -Margherita (Kaas en tomaten)
        <br/>
        <input type="checkbox" class = "test2" name="P2" id="h"> &euro;7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
        <br/>
        <input type="checkbox" class = "test3" name="P3" id="i"> &euro;7,50 -Salami (kaas, tomaten en salami)
        <br/>
        <input type="checkbox" class = "test4" name="P4" id="j"> &euro;7,50 -Prosciutto (tomaten, kaas, ham)
        <br/>
        <input type="checkbox" class = "test5" name="P5" id="k"> &euro;7,00 -Funghi (tomaten, kaas, champions)
        <br/>
        <input type="checkbox" class = "test6" name="P6" id="l"> &euro;8,00 -Tonno (tomaten, kaas, tonijn, ui)
        <br/>
        <input type="button" id="knop" value="button" />
    </form>
</div>

<div class="container" id="Boxx">
    <div id="ingredienten">
        <div>
            <h1>Kies extra ingredienten</h1></div>
        <div id="ingp1" class = "test1">

        </div>
        <div id="ingp2" class = "test2">

        </div>
        <div id="ingp3" class = "test3">

        </div>
        <div id="ingp4" class = "test4">

        </div>
        <div id="ingp5" class = "test5">

        </div>
        <div id="ingp6" class = "test6">

        </div>
        <input type="button" id="knop2" value="Totaal" />
    </div>
</div>
  </body>
  <html>

然后获取所单击复选框的类名，并使用此复选框的类名搜索div，并根据其选中的属性显示或隐藏div。

Answer 4

@Ttech感谢您向我澄清了SO。这是我的解决方案。我稍微改变了关于额外成分部分（div）的部分的标记。

请检查我的工作示例，看看这是否是你需要的。

$('#ingrediënten div').hide();

$('#knop').on('click', function() {
	
  $('#ingrediënten div').hide();

  var $checkedOptions = $('#Pi input[type=checkbox]').filter(':checked'),
    $extraIngredients = $('#ingrediënten div');

  $checkedOptions.each(function() {

    var id = $(this).attr('name');
    
    $extraIngredients.filter('[id=' + id + ']').show();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="Pizzas container" id="checkbox_pizza">
  <h1>Kies uw Pizza.</h1>
  <form id="Pi">
    <input type="checkbox" name="P1" id="g"> &euro;6,00 -Margherita (Kaas en tomaten)
    <br/>
    <input type="checkbox" name="P2" id="h"> &euro;7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
    <br/>
    <input type="checkbox" name="P3" id="i"> &euro;7,50 -Salami (kaas, tomaten en salami)
    <br/>
    <input type="checkbox" name="P4" id="j"> &euro;7,50 -Prosciutto (tomaten, kaas, ham)
    <br/>
    <input type="checkbox" name="P5" id="k"> &euro;7,00 -Funghi (tomaten, kaas, champions)
    <br/>
    <input type="checkbox" name="P6" id="l"> &euro;8,00 -Tonno (tomaten, kaas, tonijn, ui)
    <br/>
    <input type="button" id="knop" value="button" />
  </form>
</div>

<div class="container" id="Boxx">
  <div id="ingrediënten">
    <div>
      <h1>Kies extra ingredienten</h1>
    </div>
    <div id="P1">
      Extra ingredient 1
    </div>
    <div id="P2">
      Extra ingredient 2
    </div>
    <div id="P3">
      Extra ingredient 3
    </div>
    <div id="P4">
      Extra ingredient 4
    </div>
    <div id="P5">
      Extra ingredient 5
    </div>
    <div id="P6">
      Extra ingredient 6
    </div>
    <br>
    <input type="button" id="knop2" value="Totaal" />
  </div>
</div>

Jquery，for循环显示所有

4 个答案: