JQuery UI Kutularını - tüm alt kategorileri kontrol edilir sadece kategori edin

3 Cevap php

Ben aşağıdaki kodu var. Ben böyle her kategori için "Kategori" onay kutusunu bunun altında tüm öğeleri kontrol edilir sadece kontrol edilmesi gerektiğini sabitleme yardıma ihtiyacım var.

<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
function toggleTableRows()
{
  $(document).ready(function() {
    $('img.parent')
      .css("cursor","pointer")
      .toggle(
        function() {
          $(this).attr("title","Click to Collapse")
          $(this).attr("src","arrow_expanded.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Expand");
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        }
      );

    initCheckBoxes();
  });
}

function toggleCheckboxes(current, form, field) {
  $(document).ready(function() {
    $("#"+ form +" :checkbox[name^='"+ field +"[']")
      .attr("checked", current.checked);
  });
}

function toggleParentCheckboxes(current, form) {        
  var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length == 
                $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
  // replace '[anything]' with '' instead of just '[]'
  $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
    .attr("checked", checked);
}

function initCheckBoxes(form) {
  $("#"+ form +" :checkbox:checked").each(function() {
    if (this.name.match(/chk[0-9]\[.*\]/)) {
      toggleParentCheckboxes(this, form);
    }
  });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
  <tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif"
          title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0"
          onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
  </tr>
  <tr style="display: none;" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="0" name="chk0[1]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>
  <tr style="display: none;" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" checked value="0" name="chk0[2]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>
  <tr style="display: none;" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="0" name="chk0[5]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>

  <tr>
    <td><img class="parent" id="1" src="arrow_collapsed.gif"
          title="Click to Expand">Category - Vegetables</td>
    <td><input type="checkbox" name="chk1"
          onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
  </tr>
  <tr style="display: none;" id=child-1>
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="0" name="chk1[21]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>
  <tr style="display: none;" id=child-1>
    <td>Tomatoes</td>
    <td><input type="checkbox" value="0" name="chk1[26]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>
  <tr style="display: none;" id=child-1>
    <td>Green Peppers</td>
    <td><input type="checkbox" checked value="0" name="chk1[29]"
          onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
  </tr>
</table>
</form>
</body>
</html>

3 Cevap

html hala bir karmaşa ama burada çözüm

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.toggle_subcheckbox').click(function(){
			$('.subcheckbox', $(this).parents('div')).toggle();
		});


		$('.subcheckbox input').change(function(){
			$this = $(this);
			var checker = true;
			$('input', $this.parents('.subcheckbox')).each(function(){
				if( ! $(this).is(':checked')){
					checker = false
				}
				else {
					$('.maincheckbox', $this.parents('div')).attr('checked', false);
				}
			});

			if(checker){
				$('.maincheckbox', $this.parents('div')).attr('checked', true);
			}
		});

		$('.maincheckbox').change(function(){
			var state = $(this).is(':checked');

			$('.subcheckbox input', $(this).parents('div')).each(function(){
				$(this).attr('checked', state);
			});
		});
	});
</script>
<style type="text/css" media="screen">
	.subcheckbox {
		display: none;
	}
</style>
</head>
<body>
	<form id="frmDinnerMenu" method="post" action="">
		<div>
	    	<label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Fruits</label>
			<input class="maincheckbox" type="checkbox" name="chk0" />
			<div class="subcheckbox">
				<div>
			    	<label>Apple</label>
			    	<input type="checkbox" value="0" name="chk0[1]" />
				</div>
				<div>
			    	<label>Banana</label>
			    	<input type="checkbox" value="0" name="chk0[2]" />
				</div>
				<div>
			    	<label>Orange</label>
					<input type="checkbox" value="0" name="chk0[5]" />
				</div>
			</div>
		</div>
		<div>
	    	<label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Vegetables</label>
			<input class="maincheckbox" type="checkbox" name="chk0" />
			<div class="subcheckbox">
				<div>
			    	<label>Cabbage</label>
			    	<input type="checkbox" value="0" name="chk1[21]" />
				</div>
				<div>
			    	<label>Tomatoes</label>
			    	<input type="checkbox" value="0" name="chk1[26]" />
				</div>
				<div>
			    	<label>Green Peppers</label>
					<input type="checkbox" value="0" name="chk1[29]" />
				</div>
			</div>
		</div>
	</form>
</body>
</html>

'Class = "chbVegetables"' ala bir sınıf ya da bir şey gibi bir grubun bir üyesi olarak bunları ayırt etmek için girişlerine şey eklemek ve daha sonra kullanın: kontrol seçici

$(:checkbox[name='chk1']).checked=$('.chbVegetables:not(:checked)').length == 0

Fonksiyonu toggleParentCheckboxes içinde, deneyin:

if ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"[]']:checked").length){
    // replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", true);
}

Czarchiac Ancak, dediğim gibi, bunu başarmak için çalışıyoruz ne biraz belirsiz

etiketler