チェックボックスでチェックされた入力の長さを見つける方法は？

すべて私はチェックボックスのlengthが見つかりました。 ALL inputcheck boxのクリックながらチェックボックスでチェックされた入力の長さを見つける方法は？

私CodePen私が作成したサンプルの参照で
My CodePen
が、私は、私が正確に見るとcheck boxをクリックしながら長さを見つけることができていることができ、すべてのチェックボックスをチェックする必要があります。例えば
：click (or) checked入力する]チェックボックスをバラしながら、長さの結果は1のように示し、そのときに我々click (or) checkedすべての入力check boxは期待した結果がAll check box入力時にチェックするrose, white, blue必要性をクリックすると、4ようにする必要があります。
1つの入力チェックボックスをクリックして行う方法は、他のチェックボックスをチェックする必要がありますか？

HTML：

<div id="checkboxlength" class="css"> 

    <div class="blue"> 
    <input type="checkbox"><span>All</span> 
    </div> 

<div> 
<input type="checkbox" ><span>rose</span> 
</div> 

<div> 
    <input type="checkbox" ><span>blue</span> 
    </div> 


<div> 
    <input type="checkbox"><span>white</span> 
    </div> 

<div class="green"> 
    <span id="count-checked-checkboxes">0</span> checked 
    </div> 

</div>

Javaスクリプト：

$(document).ready(function(){ 

    var $checkboxes = $('#checkboxlength input[type="checkbox"]'); 

    $checkboxes.change(function(){ 
     var countCheckedCheckboxes = $checkboxes.filter(':checked').length; 
     $('#count-checked-checkboxes').text(countCheckedCheckboxes); 

     $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes); 
    }); 

});

ID：

checkboxlength

結果コード：

<div> 
    <span id="count-checked-checkboxes">0</span> checked 
    </div>

出典

2017-09-12 R. Mani Selvam

'document.querySelectorAll（ '入力[タイプ= "チェックボックス"]：チェックします'）。長さ ' – chiliNUT

あなたは、このようにあなたがチェックチェックボックスをカウントしながら、それを排除し、またクリックしながら、あなたが他の人のチェックボックスのチェックを外す/チェックできるようにそれを検出することができ、check allチェックボックスにIdまたはclassを追加することができます。

var $checkboxes = $('#checkboxlength input[type="checkbox"]'); 
 
$checkboxes.change(function(){ 
 
    /*if the clicked checkbox has check_all id 
 
    then check all other checkboxes if this one is checked 
 
    and vise versa */ 
 
    if($(this).is("#check_all")) 
 
     $checkboxes.prop('checked',$(this).prop('checked')); 
 
     
 
    $('#count-checked-checkboxes').text($checkboxes.filter(':checked').length); 
 
});

.css{ 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-direction:column; 
 
} 
 
.green{ 
 
    color:red; 
 
} 
 

 
.blue{ 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="checkboxlength" class="css"> 
 
    <div class="blue"><input type="checkbox" id="check_all"><span>All</span></div> 
 
    <div><input type="checkbox" ><span>rose</span></div> 
 
    <div><input type="checkbox" ><span>blue</span> </div> 
 
    <div><input type="checkbox"><span>white</span> </div> 
 
    <div class="green"><span id="count-checked-checkboxes">0</span> checked</div> 
 
</div>

出典

2017-09-12 08:20:29

それは完璧に働いて..... ..... –

あなたに感謝歓迎です –

<div id="checkboxlength" class="css"> 

    <div class="blue"> 
    <input type="checkbox" onclick="toggle(this);"><span>All</span> 
    </div> 

<div> 
<input type="checkbox" ><span>rose</span> 
</div> 

<div> 
    <input type="checkbox" ><span>blue</span> 
    </div> 


<div> 
    <input type="checkbox"><span>white</span> 
    </div> 

<div class="green"> 
    <span id="count-checked-checkboxes">0</span> checked 
    </div> 

</div> 
<script type="text/javascript"> 
     function toggle(source) { 
    var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
    for (var i = 0; i < checkboxes.length; i++) { 
     if (checkboxes[i] != source) 
      checkboxes[i].checked = source.checked; 
    } 
} 
</script>

出典

2017-09-12 08:13:03

ホープがうまくいます –

あなたの助けてくれてありがとう私はあなたにupvote感謝を与える... –

使用prop()

$(document).ready(function() { 
 
    $("#all").click(function() { 
 
    $('input[type="checkbox"]').prop('checked', $(this).prop('checked')); 
 
    }); 
 
}); 
 

 
$(document).on('change', function() { 
 
    $('#count-checked-checkboxes').html($('input[type="checkbox"]:checked').length) 
 
})

.css { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
.green { 
 
    color: red; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkboxlength" class="css"> 
 
    <div class="blue"> 
 
    <input type="checkbox" id="all"><span>All</span> 
 
    </div> 
 
    <div> 
 
    <input type="checkbox"><span>rose</span> 
 
    </div> 
 
    <div> 
 
    <input type="checkbox"><span>blue</span> 
 
    </div> 
 
    <div> 
 
    <input type="checkbox"><span>white</span> 
 
    </div> 
 
    <div class="green"> 
 
    <span id="count-checked-checkboxes">0</span> checked 
 
    </div> 
 
</div>

出典

2017-09-12 08:14:33

私はすべてのチェックボックスがチェックされているチェックボックスが含まれていないと思う – SilverSurfer

私は同じ、いくつかのユーザーdownvotes彼らの答えに注意を払うために...公正ではない –

それは本当に申し訳ありませんが、よく質問を読んで、あなたにupvoteを与えるつもりです – SilverSurfer

これを試してみてください。..

$(document).ready(function() { 
 

 
    var $checkboxes = $('#checkboxlength input[type="checkbox"]'); 
 
    $("#all").click(function() { 
 
    $('input:checkbox').not(this).prop('checked', this.checked); 
 
    }); 
 
    $checkboxes.change(function() { 
 
    var countCheckedCheckboxes = $checkboxes.filter(':checked').length; 
 
    $('#count-checked-checkboxes').text(countCheckedCheckboxes); 
 

 
    $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes); 
 
    }); 
 

 
});

.css { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
.green { 
 
    color: red; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkboxlength" class="css"> 
 

 
    <div class="blue"> 
 
    <input type="checkbox" id="all"><span>All</span> 
 
    </div> 
 

 
    <div> 
 
    <input type="checkbox"><span>rose</span> 
 
    </div> 
 

 
    <div> 
 
    <input type="checkbox"><span>blue</span> 
 
    </div> 
 

 

 
    <div> 
 
    <input type="checkbox"><span>white</span> 
 
    </div> 
 

 
    <div class="green"> 
 
    <span id="count-checked-checkboxes">0</span> checked 
 
    </div> 
 

 

 

 

 
</div>

出典

2017-09-12 08:15:07

あなたの助けをありがとう私はあなたにupvote感謝を与える答えを得た... –

あなたは
VARカウント= $（ "[タイプ= 'チェックボックス']：チェックする"）を使用して、選択したチェックボックスの長さを見つけることができます。長さ;

出典

2017-09-12 08:19:13

・ホープこのことができます：

$(document).ready(function() { 
 
\t var $checkboxes = $('#checkboxlength input[type="checkbox"]'); 
 
\t $checkboxes.change(function() { 
 
\t \t if ($(this).parent().hasClass('blue')) 
 
\t \t { 
 
\t \t \t $("input:checkbox").prop("checked", this.checked); 
 
\t \t \t $('#count-checked-checkboxes').text($(":checked").length > 0 ? $(":checked").length-1 : 0); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t var countCheckedCheckboxes = $checkboxes.filter(':checked').length; 
 
\t \t \t $('#count-checked-checkboxes').text(countCheckedCheckboxes); 
 
\t \t \t $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes); 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div id="checkboxlength" class="css"> 
 
     <div class="blue"> 
 
      <input type="checkbox"><span>All</span> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox"><span>rose</span> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox"><span>blue</span> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox"><span>white</span> 
 
     </div> 
 
     <div class="green"> 
 
      <span id="count-checked-checkboxes">0</span> checked 
 
     </div> 
 
    </div>

出典

2017-09-12 08:20:42

あなたの答えはあなたの答えは次のようなテキストに基づいています： - .next（ 'span'）。text（）== "All"）ので、 'id'や' value'のようなテキストなしで修正できますか？ ...私はちょうどあなたの答えを探しています、IDまたは値のおかげでそれを修正してください –

あなたの助けをありがとう私はあなたにupvote感謝を与える答えを得た... –

@ R.ManiSelvam "Span> All"の代わりに "Blue"クラスを使用します。コードは 'if（$（this）.parent（）。hasClass（ 'blue'））'に変更されました。ちょうど代替。 –

あなたは "すべて" のチェックボックスのための唯一の1つのクラスを追加し、2つのreausable機能にあなたのJSを分離することができますcountChecked()およびtoggleAll()。ここでは、スニペットは以下のとおりです。

** HTML：

<div class="blue"> 
    <input type="checkbox" class="toggleAll"><span>All</span> 
    </div> 

<div> 
<input type="checkbox" ><span>rose</span> 
</div> 

<div> 
    <input type="checkbox" ><span>blue</span> 
    </div> 


<div> 
    <input type="checkbox"><span>white</span> 
    </div> 

<div class="green"> 
    <span id="count-checked-checkboxes">0</span> checked 
    </div> 




</div>

** JS：

$(document).ready(function(){ 

    var $checkboxes = $('#checkboxlength input[type="checkbox"]:not(".toggleAll")'); 

    $checkboxes.on('change', function(){ 
     countChecked(); 
    }); 
    function countChecked(){ 
    var countCheckedCheckboxes = $checkboxes.filter(':checked').length; 
     $('#count-checked-checkboxes').text(countCheckedCheckboxes); 

    } 
    function toggleAll(checked){ 
    if(checked){ 
     $checkboxes.each(function(){ 
     this.checked = true; 
     }); 
    }else{ 
     $checkboxes.each(function(){ 
     this.checked = false; 
     }); 
    } 
    } 

    $('.toggleAll').on('click', function(){ 
    toggleAll(this.checked); 
    countChecked(); 
    }); 

});

出典

2017-09-12 08:32:26 pkolawa

あなたの助けていただきありがとうございます。私は答えを得ました... –

チェックボックスでチェックされた入力の長さを見つける方法は？

答えて

関連する問題