他のチェックボックスをオンにするとチェックボックスをオフにします

Question

私のコードを試しますが、いつも動いているとは限りません。私はあきらめます。

他のチェックボックスをオンにすると、チェックボックスのチェックを外すことができますか？ここで

は私のコードです：

JSコード：

$("#1 #checkAll").change(function() { 
    if ($("#1 #checkAll").is(':checked')) { 
     $("#1 input[type=checkbox]").each(function() { 
      $(this).prop("checked", true); 
     }); 
    } else { 
     $("#1 input[type=checkbox]").each(function() { 
      $(this).prop("checked", false); 
     }); 
    } 
}); 
$("#2 #checkAll2").change(function() { 
    if ($("#2 #checkAll2").is(':checked')) { 
     $("#2 input[type=checkbox]").each(function() { 
      $(this).prop("checked", true); 
     }); 
    } else { 
     $("#2 input[type=checkbox]").each(function() { 
      $(this).prop("checked", false); 
     }); 
    } 
}); 

$('#c1').on('click', function() { 
    var $$ = $(this).next('#checkAll') 
    console.log($$.is(':checked')) 
    if ($$.is(':checked')) { 
     $(this).toggleClass('unchecked checked'); 
     $('#checkAll').prop('checked', false).change(); 
    } else { 
     $(this).toggleClass('unchecked checked'); 
     $('#checkAll').prop('checked', true).change(); 
    } 
}) 
$('#c2').on('click', function() { 
    var $$ = $(this).next('#checkAll2') 
    if ($$.is(':checked')) { 
     $(this).toggleClass('unchecked checked'); 
     $('#checkAll2').prop('checked', false).change(); 
    } else { 
     $(this).toggleClass('unchecked checked'); 
     $('#checkAll2').prop('checked', true).change(); 
    } 
}) 

CSSコード：

.unchecked { 
    background: #1ba1e2; 
    border-color: #1ba1e2; 
    height: 70px; 
    font-weight: bold; 
    margin-left:20px; 
    width:200px; 
    font-size: 30px; 
} 
.checked { 
    background: #1c629b; 
    border-color: #1c629b; 
    height: 70px; 
    font-weight: bold; 
    margin-left:20px; 
    width:200px; 
    font-size: 30px; 
} 

HTMLコード：

<div class="container"> 
    <center> 
     <h2 style="color: white; padding-top: 32px; font-size: 50px; font-family: 'Gotham Bold';"><b>Pilih Nominal</b></h2> 
     <div style="margin-top: 35px; margin-left: -22px;"> 
      <form action="" method="POST"> 
       <input type="hidden" name="sqn" value="20160625110635"> 
       <input type="hidden" name="saldo" value="Array"> 
       <input type="hidden" name="mac" value="64:70:02:4a:a7:e4"> 
       <input type="hidden" name="tid" value="01"> 
       <input type="hidden" name="msidn" value="6287875230364"> 
       <input type="hidden" name="typ" value="PREPAID"> 
       <input type="hidden" name="ip" value="192.168.1.1"> 
       <input type="hidden" name="cmd" value="prepaid-type"> 
       <table id="tab1"> 
       <tr> 
       <td id="1"> 
        <button type="button" id="c1" class="unchecked">1</button> 
        <input type="checkbox" name="checkAll" id="checkAll" style="display: none;"> 
        <input type="checkbox" name="book1" id="book" value="book1"> 
        <input type="checkbox" name="book2" id="book" value="book2"> 
        <input type="checkbox" name="book3" id="book" value="book3"> 
        <input type="checkbox" name="book4" id="book" value="book4"> 
        <input type="checkbox" name="book5" id="book" value="book5"> 
       </td> 
       </tr> 
       <tr> 
       <td id="2"> 
        <button type="button" id="c2" class="unchecked">2</button> 
        <input type="checkbox" name="checkAll" id="checkAll2" style="display: none;"> 
        <input type="checkbox" name="book1" id="book" value="book1"> 
        <input type="checkbox" name="book2" id="book" value="book2"> 
        <input type="checkbox" name="book3" id="book" value="book3"> 
        <input type="checkbox" name="book4" id="book" value="book4"> 
        <input type="checkbox" name="book5" id="book" value="book5"> 
       </td> 
       </tr> 
       </table> 
       <input type="submit" name="sbm" value="Submit" class="button primary"> 
      </form> 
     </div> 
    </center> 
</div> 

ここに私のバイオリンです：JSFIDDLE

Answer 1

は、このを見てみましょう：

$("#1 #checkAll").change(function() { 
 
     if ($("#1 #checkAll").is(':checked')) { 
 
     $("#1 input[type=checkbox]").each(function() { 
 
      $(this).prop("checked", true); 
 
     }); 
 
     //When you check all #1 checkboxes, 
 
     //you uncheck all #2 checkboxes 
 
     $("#2 input[type=checkbox]").each(function() { 
 
      $(this).prop("checked", false); 
 
     }); 
 
     } else { 
 
     $("#1 input[type=checkbox]").each(function() { 
 
      $(this).prop("checked", false); 
 
     }); 
 
     } 
 
    }); 
 
    $("#2 #checkAll2").change(function() { 
 
     if ($("#2 #checkAll2").is(':checked')) { 
 
     $("#2 input[type=checkbox]").each(function() { 
 
      $(this).prop("checked", true); 
 
     }); 
 
     //When you check all #2 checkboxes, 
 
     //you uncheck all #1 checkboxes 
 
     $("#1 input[type=checkbox]").each(function() { 
 
      $(this).prop("checked", false); 
 
     }); 
 
     } else { 
 
     $("#2 input[type=checkbox]").each(function() { 
 
      $(this).prop("checked", false); 
 
     }); 
 
     } 
 
    }); 
 

 
    $('#c1').on('click', function() { 
 
     var $$ = $(this).next('#checkAll') 
 
     console.log($$.is(':checked')) 
 
     if ($$.is(':checked')) { 
 
     $(this).toggleClass('unchecked checked'); 
 
     $('#checkAll').prop('checked', false).change(); 
 
     } else { 
 
     $(this).toggleClass('unchecked checked'); 
 
     //when you click #c1, you remove class checked to #c2 
 
     $("#c2").removeClass('checked'); 
 
     $("#c2").addClass('unchecked'); 
 
     $('#checkAll').prop('checked', true).change(); 
 
     } 
 
    }) 
 
    $('#c2').on('click', function() { 
 
     var $$ = $(this).next('#checkAll2') 
 
     if ($$.is(':checked')) { 
 
     $(this).toggleClass('unchecked checked'); 
 
     $('#checkAll2').prop('checked', false).change(); 
 
     } else { 
 
     $(this).toggleClass('unchecked checked'); 
 
     //when you click #c2, you remove class checked to #c1 
 
     $("#c1").removeClass('checked'); 
 
     $("#c1").addClass('unchecked'); 
 
     $('#checkAll2').prop('checked', true).change(); 
 
     } 
 
    })

.unchecked { 
 
\t \t background: #1ba1e2; border-color: #1ba1e2; 
 
\t \t height: 70px; font-weight: bold; margin-left:20px; width:200px; font-size: 30px; 
 
\t \t } 
 
.checked {background: #1c629b; border-color: #1c629b; 
 
\t \t height: 70px; font-weight: bold; margin-left:20px; width:200px; font-size: 30px; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <center> 
 
    <h2 style="color: white; padding-top: 32px; font-size: 50px; font-family: 'Gotham Bold';"><b>Pilih Nominal</b></h2> 
 
    <div style="margin-top: 35px; margin-left: -22px;"> 
 

 
     <form action="" method="POST"> 
 
     <input type="hidden" name="sqn" value="20160625110635"> 
 
     <input type="hidden" name="saldo" value="Array"> 
 
     <input type="hidden" name="mac" value="64:70:02:4a:a7:e4"> 
 
     <input type="hidden" name="tid" value="01"> 
 
     <input type="hidden" name="msidn" value="6287875230364"> 
 
     <input type="hidden" name="typ" value="PREPAID"> 
 
     <input type="hidden" name="ip" value="192.168.1.1"> 
 
     <input type="hidden" name="cmd" value="prepaid-type"> 
 
     <table id="tab1"> 
 
      <tr> 
 
      <td id="1"> 
 
       <button type="button" id="c1" class="unchecked"> 
 
       1 
 
       </button> 
 
       <input type="checkbox" name="checkAll" id="checkAll" style="display: none;"> 
 
       <input type="checkbox" name="book1" id="book" value="book1"> 
 
       <input type="checkbox" name="book2" id="book" value="book2"> 
 
       <input type="checkbox" name="book3" id="book" value="book3"> 
 
       <input type="checkbox" name="book4" id="book" value="book4"> 
 
       <input type="checkbox" name="book5" id="book" value="book5"> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td id="2"> 
 
       <button type="button" id="c2" class="unchecked"> 
 
       2 
 
       </button> 
 
       <input type="checkbox" name="checkAll" id="checkAll2" style="display: none;"> 
 
       <input type="checkbox" name="book1" id="book" value="book1"> 
 
       <input type="checkbox" name="book2" id="book" value="book2"> 
 
       <input type="checkbox" name="book3" id="book" value="book3"> 
 
       <input type="checkbox" name="book4" id="book" value="book4"> 
 
       <input type="checkbox" name="book5" id="book" value="book5"> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     <input type="submit" name="sbm" value="Submit" class="button primary"> 
 
     </form> 
 
    </div>

Answer 2

をあなたはクリックイベントを使用してコードを単純化することができます：ここで

$('#c1').on('click', function() { 
$(this).parents('td').find('input[type="checkbox"]').attr('checked', false); 
}); 
$('input').on('click', function(e) {$(this).parents('td').find('input[type="checkbox"]').attr('checked',false); 
    $(this).prop('checked', true); 
    return true; 
}); 

Answer 3

は完全なコードである（同じHTMLとCSSのコードをキープ）：

$('#c1').on('click', function() { 
    $(this).toggleClass('checked unchecked'); 
    $(this).parents('tbody').find('input[type="checkbox"]').attr('checked', false); 
    if($(this).hasClass('checked')) { 
     $('input#checkAll').prop('checked', true); 
    } else { 
     $('#checkAll').attr('checked', false); 
    } 

}); 
$('input').on('click', function(e) { 
    $(this).parents('tbody').find('input[type="checkbox"]').attr('checked',false);; 
    $(this).prop('checked', true); 
    return true; 
}); 

$('#c2').on('click', function() { 
    $(this).toggleClass('checked unchecked'); 
    $(this).parents('tbody').find('input[type="checkbox"]').attr('checked', false); 
    if($(this).hasClass('checked')) { 
     $('input#checkAll2').prop('checked', true); 
    } else { 
     $('input#checkAll2').attr('checked', false); 
    } 
});