當通過jQuery點擊標籤時，選中並取消選中複選框

我想要簡單的切換類型按鈕。我知道了，但有一些問題。點擊標籤複選框被選中但無法檢查剩餘的複選框。我使用類，因爲我通過asp中繼器有未知數量的複選框。當通過jQuery點擊標籤時，選中並取消選中複選框

我的HTML是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>

來源

2017-09-30 Zunair Nawaz

目前還不清楚，如果你需要通過點擊只有一個檢查所有的箱子...反正我張貼的答案，希望它可以幫助... – DaFois

見這裏詳細https://jsfiddle.net/9soqL8wt/ –

在這裏，你去了一個解決方案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>

希望這會幫助你。

來源

2017-09-30 15:43:20 Shiladitya

感謝兄弟工作到現在，我希望也休息。對於其他人來說，看起來不像使用UI切換其切換效果複選框所示。 –

這是沒有必要使用jQuery，你可以簡單地包裝您的複選框中label標籤。

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

來源

2017-09-30 15:17:12 DaFois

見詳細在這裏https://jsfiddle.net/9soqL8wt/ –

當通過jQuery點擊標籤時，選中並取消選中複選框

回答

相關問題