web-dev-qa-db-ja.com

check / uncheck bootstrap jQueryのチェックボックス

昨日別の post を作成しましたが、成功しませんでした。私はこれに対する解決策を見つけることができないので、アイデアを並べ替えてもう一度尋ねようとします（私は初心者で、私は本当に一生懸命努力しています）。

問題は、Bootstrapに基づいてこのテンプレートを使用していることです。これは、ファイルの1つから直接見ることができ、プロジェクトで使用しているコードです。

htmlスニペット：

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

多くの検索の後、コードを次のように調べることで調べました（スニペット）：

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">                           
      </span>
    </div> Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Catamarca" id="" name="st[]">                             
      </span>
    </div> Catamarca
  </label>
</div>

ご覧のとおり、別のdivと別のスパンが追加されているため（理由と方法がわからない）、私は今、私が抱えているDOMの問題だと推測しています。

これは私のjsファイルのスニペットです：

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

そのため、この関数は、私が持っているすべてのチェックボックスを選択します（別のカテゴリに属しているために必要ないチェックボックスも）。

Divとspanが追加された理由と、必要なチェックボックスのみを選択する方法を知りたいです。

そのために、私はこのようなコードを試しましたが、成功しませんでした：

テスト1

$('#allstates').click(function() {
  if ($(this).is(':checked')) {
    $('span input').attr('checked', true);
  } else {
    $('span input').attr('checked', false);
  }
});

test2

$('#allstates').click(function() {
  $(".states").prop("checked",$("#allstates").prop("checked"))
});

そして私が消した他のもの。

注：検査時にjsエラーは表示されません

javascriptjqueryhtmltwitter-bootstrapcheckbox
8
Limon

この関数は、チェックするはずのチェックボックスをすべてチェックしたと述べたので、解決策を探していました：

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

しかし、これは私が望んでいたものではありません。また、コードを検査するときにコードが「異なる」ことに気づいたことにも言及しました（ChromeでF12を使用）。

コードが変更されているため、「スパンタグ」検索を開始したクラス（チェックボックス）を変更する必要があるため、クラスチェックボックスをid状態に変更する必要があることに気付きました。これが結果です。

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

これでようやく動作します。

6
Limon

また、チェックボックスの選択時にpropをtrueに追加することが重要です。

$("#checkAll").click(function(){
   var check = $(this).prop('checked');
   if(check == true) {
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
   } else {
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   }
});
9
Mufaddal Saifee

次のようなコードを探していると思います：

$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});

JsFiddleの例

ID allstatesのチェックボックスの状態が変わったら、チェックボックスの値を取得し、controlsというクラスの最初の親html要素を見つけてから、その要素のすべてのチェックボックスのみを更新します。チェックされた値。

2
Erik Philips

シンプルなbootstrapチェックボックス

<label><input type="checkbox" value="">Option 1</label>

Chrome devツールでデバッグする場合、ラベルは https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png のようになります

チェックボックスの状態を変更するには、単にtrue|false オン lable.control.checked

label.control.checked = false; //uncheck
label.control.checked = true; //check

ビデオデモ https://youtu.be/3qEMFd9bcd8

0
Anh Le Hoang