同じクラスのチェックボックスを選択する方法は同じですが、同じフィールドセット内のみですか？

Question

私は効率的に同じ一般クラスを使いたいいくつかのチェックボックスグループを作成する予定で、この問題に苦労しましたが、私はある種の「評価システム」を使うことにしました。いずれかのフィールドセットの5つのチェックボックスが他のチェックボックスをオンまたはオフにします。

例：3チェックボックスをオンにすると、1と2と3がチェックされますが、4と5がチェックされません。

しかし、私はページ上に多くのフィールドセットを持っているので、相互に干渉し合っていません。

​​ 次のjQueryコードで

：：だから

<script type="text/javascript"> 
jQuery(".checkOne").click(function() { 
    jQuery('.checkOne').prop('checked', true); 
    jQuery('.checkTwo').prop('checked', false); 
    jQuery('.checkThree').prop('checked', false); 
    jQuery('.checkFour').prop('checked', false); 
    jQuery('.checkFive').prop('checked', false); 
}); 
jQuery(".checkTwo").click(function() { 
    jQuery('.checkOne').prop('checked', true); 
    jQuery('.checkTwo').prop('checked', true); 
    jQuery('.checkThree').prop('checked', false); 
    jQuery('.checkFour').prop('checked', false); 
    jQuery('.checkFive').prop('checked', false); 
}); 
jQuery(".checkThree").click(function() { 
    jQuery('.checkOne').prop('checked', true); 
    jQuery('.checkTwo').prop('checked', true); 
    jQuery('.checkThree').prop('checked', true); 
    jQuery('.checkFour').prop('checked', false); 
    jQuery('.checkFive').prop('checked', false); 
}); 
jQuery(".checkFour").click(function() { 
    jQuery('.checkOne').prop('checked', true); 
    jQuery('.checkTwo').prop('checked', true); 
    jQuery('.checkThree').prop('checked', true); 
    jQuery('.checkFour').prop('checked', true); 
    jQuery('.checkFive').prop('checked', false); 
}); 
jQuery(".checkFive").click(function() { 
    jQuery('.checkOne').prop('checked', true); 
    jQuery('.checkTwo').prop('checked', true); 
    jQuery('.checkThree').prop('checked', true); 
    jQuery('.checkFour').prop('checked', true); 
    jQuery('.checkFive').prop('checked', true); 
}); 
</script> 

私が言ったように、これは私がHTMLに持っているものです。私の問題は、それは動作しますが、Example1はExample2と干渉します。ただし、jQueryを同じフィールドセット内でのみ使用できるようにする方法はありますか？

Answer 1

ここに1つの方法です：

$('#field1 input, #field2 input').click(function() { 
 
    $(this).prop('checked', true).siblings().prop('checked', false).end().addBack().prevAll().prop('checked', true) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Example 1</p> 
 
<fieldset id="field1"> 
 
    <input type="checkbox" name="forca" class="checkOne" /> 
 
    <input type="checkbox" name="forca" class="checkTwo" /> 
 
    <input type="checkbox" name="forca" class="checkThree" /> 
 
    <input type="checkbox" name="forca" class="checkFour" /> 
 
    <input type="checkbox" name="forca" class="checkFive" /> 
 
</fieldset> 
 

 
<p>Example 2</p> 
 
<fieldset id="field2"> 
 
    <input type="checkbox" name="destreza" class="checkOne" /> 
 
    <input type="checkbox" name="destreza" class="checkTwo" /> 
 
    <input type="checkbox" name="destreza" class="checkThree" /> 
 
    <input type="checkbox" name="destreza" class="checkFour" /> 
 
    <input type="checkbox" name="destreza" class="checkFive" /> 
 
</fieldset>

それが動作する方法は、入力をクリックするとされ、すべてのチェックを解除、入力をチェックし続けますチェックされた兄弟の前に来るすべての兄弟をチェックします。他のグループには影響しません。

Answer 2

あなたはチェックボックスにクラスを持つ必要はありません...
これを参照してくださいFiddleを参照してください。

使用この：

$("input[type='checkbox']").click(function(){ 
    $(this).prop('checked', true); 
    $(this).prevUntil("fieldset").prop('checked', true); // check all previous checkboxes in the same fieldset 
    $(this).nextUntil("fieldset").prop('checked', false); // uncheck all next checkboxes in the same fieldset 
}); 

Answer 3

のチェックボックスをクリックすると、同じ親フィールドセットの下のチェックボックスに影響を与えていることを確認するには、次のような

jQuery(".checkOne").click(function() { 
    var $field = $(this).parent(); 
    $field.find('.checkOne').prop('checked', true); 
    $field.find('.checkTwo').prop('checked', false); 
    $field.find('.checkThree').prop('checked', false); 
    $field.find('.checkFour').prop('checked', false); 
    $field.find('.checkFive').prop('checked', false); 
}); 

の下にあなたの機能を変更することができます。しかし、私は、このアプローチにはいくつかの他の問題に気づきました。そのチェックボックスを再度クリックしても、そのチェックボックスをオフにすることはできません。

Answer 4

ないあなたが達成しようとしているが、あなたはjQueryを使って複数の方法であなたのセレクタを制限することができます正確に何を確認してください。

jQuery('#field2').find('.check1'); 

か：

jQuery('#field2 .check1'); 

その他の情報：full jquery selector documentation

Answer 5

私はこれが助けてくれることを願っています。

$('input[type="checkbox"]').click(function(e){ 
 
    var parent = this.parentNode.children 
 
    $(parent).attr('checked', false) 
 
    var index = Array.from(parent).indexOf(this) 
 
    var selection = Array.from(parent).slice(0, index +1).map(function(item){ 
 
    item.checked = true 
 
    }) 
 
    
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<p>Example 1</p> 
 
<fieldset id="field1"> 
 
    <input type="checkbox" name="forca" class="checkOne" /> 
 
    <input type="checkbox" name="forca" class="checkTwo" /> 
 
    <input type="checkbox" name="forca" class="checkThree" /> 
 
    <input type="checkbox" name="forca" class="checkFour" /> 
 
    <input type="checkbox" name="forca" class="checkFive" /> 
 
</fieldset> 
 

 
<p>Example 2</p> 
 
<fieldset id="field2"> 
 
    <input type="checkbox" name="destreza" class="checkOne" /> 
 
    <input type="checkbox" name="destreza" class="checkTwo" /> 
 
    <input type="checkbox" name="destreza" class="checkThree" /> 
 
    <input type="checkbox" name="destreza" class="checkFour" /> 
 
    <input type="checkbox" name="destreza" class="checkFive" /> 
 
</fieldset>

Answer 6

これは動作します。

var doc = document; 
 
var forca = doc.getElementsByName('forca'); 
 
var destreza = doc.getElementsByName('destreza'); 
 
var inputs = document.getElementsByTagName('input'); 
 

 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].addEventListener("click", function(){ 
 
    if(this.checked){ 
 
     check(this.className, this.name); 
 
    } else { 
 
     //alert('i fired'); 
 
     uncheck(this.className, this.name); 
 
    } 
 
    }); 
 
} 
 

 
function check(number,name){ 
 
    number = numberizer(number); 
 
    if(name==='forca'){ 
 
    for (var i = 0; i < number; i++) { 
 
     forca[i].checked = true; 
 
    }  
 
    } 
 
    if(name==='destreza'){ 
 
    for (var i = 0; i < number; i++) { 
 
     destreza[i].checked = true; 
 
    } 
 
    } 
 
} 
 

 
function uncheck(number,name){ 
 
    number = numberizer(number); 
 
    if(name==='forca'){ 
 
    for (var i = number; i < 5; i++) { 
 
     forca[i].checked = false; 
 
    } 
 
    } 
 
    if(name==='destreza'){ 
 
    for (var i = number; i < 5; i++) { 
 
     destreza[i].checked = false; 
 
    } 
 
    } 
 
} 
 

 
function numberizer(number){ 
 
    switch (number) { 
 
    case "checkOne": 
 
     return 1; 
 
     break; 
 
    case "checkTwo": 
 
     return 2; 
 
     break; 
 
    case "checkThree": 
 
     return 3; 
 
     break; 
 
    case "checkFour": 
 
     return 4; 
 
     break; 
 
    case "checkFive": 
 
     return 5; 
 
     break; 
 
    } 
 
}

<p>Example 1</p> 
 
<fieldset id="field1"> 
 
    <input type="checkbox" name="forca" class="checkOne" /> 
 
    <input type="checkbox" name="forca" class="checkTwo" /> 
 
    <input type="checkbox" name="forca" class="checkThree" /> 
 
    <input type="checkbox" name="forca" class="checkFour" /> 
 
    <input type="checkbox" name="forca" class="checkFive" /> 
 
</fieldset> 
 

 
<p>Example 2</p> 
 
<fieldset id="field2"> 
 
    <input type="checkbox" name="destreza" class="checkOne" /> 
 
    <input type="checkbox" name="destreza" class="checkTwo" /> 
 
    <input type="checkbox" name="destreza" class="checkThree" /> 
 
    <input type="checkbox" name="destreza" class="checkFour" /> 
 
    <input type="checkbox" name="destreza" class="checkFive" /> 
 
</fieldset>