0

ユーザーがこれをクリックすると、関数「boxclick」を呼び出すチェックボックス入力がさらにあります。

<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">

すべてのチェック/チェックを外すには、単純なjqueryスクリプトを使用します:

<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">

私の問題は、実行されていないすべての機能「boxclick」をチェック/チェック解除したときです。

  // == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }
  }
4

4 に答える 4

2

私はあなたができると思います：

HTML

<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">

jQuery

すべてをチェック/チェック解除する場合checkbox:

var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
   checkboxes.prop('checked', this.checked);
});

一度にいずれかを選択したい場合：

var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
   checkboxes.prop('checked', false);
   this.checked = !this.checked;
});​

デモ

于 2012-09-10T10:15:48.127 に答える
2

チェックボックスの属性をチェック済みに設定しても、クリック イベントが自動的に偽造されるわけではありません。これらの boxclick 関数呼び出しをいくつかの「onclick」ハンドラー内に配置したため、JavaScript がすべてのボックスをクリックしたと見なすために、偽のクリック イベントをトリガーする必要があります。偽のクリック イベントをトリガーするには、次のように $('#whatever').trigger('click') を使用します。

$('input[name*=\'selected\']').trigger('click');

すべての機能をチェック/チェック解除したい場合は、「OK、マスターチェックボックス、チェックされているかチェックされていないときはいつでも聞いてください。そのときは、スレーブボックス（ページ上の他のボックス）のチェック済み属性を一致するように設定してください。マスターの現在チェックされている属性。」このような：

function checkAllorUncheckAll(event){

    var chiefCheckbx = event.currentTarget;
    var myBoxes = $('input[name*=\'selected\']'); 

    myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');

}

$('#masterCheckBox').on('change',checkAllorUncheckAll);
于 2012-09-10T10:15:16.503 に答える
0

デモ http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>
于 2012-09-10T11:29:50.050 に答える