Deaktivieren Sie das Kontrollkästchen, wenn Sie andere Kontrollkästchen aktivieren

Question

Ich versuche meinen Code, aber es funktioniert nicht immer, ich gebe auf.

Können Sie mir mit meinem Code helfen, ein Kontrollkästchen zu deaktivieren, wenn Sie ein anderes Kontrollkästchen aktivieren?

Hier ist mein Code:

JS-Code:

$("#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-Code:

.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-Code:

<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> 

Hier ist meine Geige: JSFIDDLE

Answer 1

Werfen Sie einen Blick auf diese:

$("#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

Sie Code vereinfachen können durch Click-Ereignis mit:

$('#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

Hier vollständige Code (HTML und CSS-Code gleichen halten):

$('#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); 
    } 
});