jQueryを通じてラベルをクリックするとチェックボックスをオフにします

Question

単純なトグルタイプのボタンが必要です。私はそれを持っていますが、何か問題があります。クリックラベルのチェックボックスはチェックされていますが、残りのチェックボックスはチェックできません。私はaspリピータを介してチェックボックスが不明なので、クラスを使用しました。

私のHTMLは、あなたは、単にlabelタグであなたのチェックボックスをラップすることができ、enter code here

$(".labcbox").click(function() { 
 
    var selectedIndex = $('.labcbox').index($(this)); 
 
    if ($(".toggin").is(':checked')) { 
 
    $(".toggin")[selectedIndex].checked = false; 
 
    } 
 
    else { 
 
    $(".toggin")[selectedIndex].checked = true; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>CheckBox toggle</td> 
 
    <td> 
 
     <input type="checkbox" class="toggin" /> 
 
     <label class="labcbox"></label> 
 
     <div class="divmark"> 
 
     Hypertention 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>CheckBox toggle</td> 
 
    <td> 
 
     <input type="checkbox" class="toggin" /> 
 
     <label class="labcbox"></label> 
 
     <div class="divmark"> 
 
     Hypertention 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

あなたが解決https://jsfiddle.net/pLq5ep80/

$(".labcbox").click(function() { 
 
    $(this).siblings('input.toggin').prop('checked', !$(this).siblings('input.toggin').is(':checked')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>CheckBox toggle</td> 
 
    <td> 
 
     <input type="checkbox" class="toggin" /> 
 
     <label class="labcbox">Checkbox 1</label> 
 
     <div class="divmark"> 
 
     Hypertention 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>CheckBox toggle</td> 
 
    <td> 
 
     <input type="checkbox" class="toggin" /> 
 
     <label class="labcbox">Checkbox 2</label> 
 
     <div class="divmark"> 
 
     Hypertention 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

これはあなたを助けることを願って行きます。

Answer 2

それはjQueryのを使用する必要はありませんです。ここで

<label>Click to check 
 
    <input type="checkbox"> 
 
</label>