jsを使用して1つのチェックボックスを選択し、他のチェックボックスをオフにする方法

Question

これは私のコードです。ここで私は入力する]チェックボックスの両方に同じ

$(document).ready(function() { 
 
    $(document).on('change', ".check_class", function() { 
 
    $(".check_class").attr("checked", false); //uncheck all checkboxes 
 
    $(this).attr("checked", true); //check the clicked one 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row m-t-10 m-l-5"> 
 
    <div class="form-group row"> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> 
 
     <input type="checkbox" class="check_class" value="is_email" name="is_email"> 
 
     Email send? 
 
     </label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> 
 
     <input type="checkbox" class="check_class" value="is_sms" name="is_sms"> 
 
     Sms send? 
 
     </label> 
 
    </div> 
 
    </div> 
 
</div>

をクラス名を与えている私は多くのことを試してみましたが、そのまだ機能していません。何か間違い。ありがとうございました。あなたは以下のようにprop()代わりのattr()を使用する場合

Answer 1

あなたのコードは正常に動作します： -

$(document).ready(function() { 
 
    $(document).on('change', ".check_class", function() { 
 
    $(".check_class").prop("checked", false); 
 
    $(this).prop("checked", true); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row m-t-10 m-l-5"> 
 
    <div class="form-group row"> 
 
     <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_email" name="is_email">Email send?</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_sms" name="is_sms">Sms send?</label> 
 
    </div> 
 
    </div> 
 
</div>

注： - あなたは、ラジオボタンのために行くことができます彼らはデフォルトでそれを持っているからです。

参考： - why .attr() not worked but .prop() worked

Answer 2

$(document).on('change', ".check_class", function() { 
     $(".check_class").each(function(index,element){ 
        element.attr("checked", false); 
     }); //uncheck all check-boxes 

}); 

Answer 3

これらのチェックボックスの一方のみがラジオボタンを使用するだけで、一度にチェックする必要があります。それは彼らがために設計されたまさにだし、それはまったくのJSコードの必要性を保存します。あなたは他のすべてのチェックボックスをオフにnot(this)を使用することができます

<div class="row m-t-10 m-l-5"> 
 
    <div class="form-group row"> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> 
 
     <input type="radio" class="check_class" value="is_email" name="send"> 
 
     Email send? 
 
     </label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> 
 
     <input type="radio" class="check_class" value="is_sms" name="send"> 
 
     Sms send? 
 
     </label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

。

$(document).ready(function() { 
 
    $(document).on('change', ".check_class", function() { 
 
    $(".check_class").not(this).prop('checked', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row m-t-10 m-l-5"> 
 
    <div class="form-group row"> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_email" name="is_email">Email send?</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_sms" name="is_sms">Sms send?</label> 
 
    </div> 
 
    </div> 
 
</div>