期待通りにチェックボックスが変更されない

ユーザーがチェックボックスを選択するか、divを変更して値を変更できるようにする簡単なウィジェットを作成しようとしています。私は、次のコードを持っている：期待通りにチェックボックスが変更されない

$(document).ready(function() { 
 
    $(document).on("click", ".inputCheck", function(event) { 
 
    event.stopImmediatePropagation(); 
 
    event.preventDefault(); 
 
    $(this).closest(".outter").trigger("click"); 
 
    }); 
 

 
    $(document).on("click", ".outter", function(event) { 
 
    console.log("inside"); 
 
    event.stopImmediatePropagation(); 
 
    event.preventDefault(); 
 
    var $checkBox = $(this).find("input"); 
 
    $(this).removeClass("selected"); 
 
    $checkBox.prop("checked", !$checkBox.prop("checked")); 
 

 
    if ($checkBox.prop("checked")) 
 
     $(this).addClass("selected"); 
 
    }); 
 
});

.outter { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.outter:hover, 
 
.inputCheck:hover { 
 
    cursor: pointer; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
    <div class="outter"> 
 
    <input class="inputCheck" type="checkbox"> 
 
    <div>This is a test</div> 
 
    </div> 
 
</body> 
 
</html>

div要素を選択したときにそれは通常通りに動作し、すなわちチェックボックスが値を変更し、新しいクラス 'selected'が.outterクラスに追加されました。チェックボックスを選択すると、すべてのデフォルトと伝播を停止し、divを選択してクラス値を変更するのと同じコードをトリガーしようとします。ただし、チェックボックスは同じままです。誰かがなぜこれがうまくいかず、どうやって修正するのか教えてください。

おかげ

出典

2017-03-10 johhny B

あなたの選択が間違っている、input要素のクラスはooppsはい私はそれを変更します待つ 'inputCheck'ない' inputCheckBox' – aje

です。私はまだ問題があると思っていますが –

はい、それはまだ残念です私は他のコードで動作させることができなかった後、この例をノックしました... –

あなたは伝播か何かを停止する必要はありません。クリックが入力にあったかどうかを確認して、入力チェック状態を次のように変更できます。入力のクリックは、自動的に親divに伝播されます。クリック起点をevent.targetで確認し、必要な処置を行うことができます。

$(document).ready(function() { 
 
    $(".outter").click(function(event) { 
 
    console.log('clicked'); 
 
    var $checkBox = $(this).find("input"); 
 
    $(this).removeClass("selected"); 
 
    if (!$(event.target).is($checkBox)) { 
 
     $checkBox.prop("checked", !$checkBox.prop("checked")); 
 
    } 
 
    if ($checkBox.prop("checked")) 
 
     $(this).addClass("selected"); 
 
    event.stopPropagation(); 
 
    }); 
 
});

.outter { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.outter:hover, 
 
.inputCheck:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="outter"> 
 
    <input class="inputCheck" type="checkbox" /> 
 
    <div id="testIt">This is a test</div> 
 
</div>

出典

2017-03-10 06:02:01 RRK

こんにちはRejith、それは素晴らしいです。なぜ原作がうまくいかなかったのですか？ –

@xenophon元のコードの問題点は、チェックマークが付いた入力をクリックすると、外側のクリックがトリガーされたことでした。この関数は、入力のcheckedプロパティを再び切り替えます。つまり、入力の変更は2回発生します。 – RRK

しかし、なぜpreventDefaultとstopPropagation関数がこれを止めないのでしょうか？ –

$(document).ready(function() { 
 
    $(document).on("click", ".inputCheck", function(event) { 
 
    event.stopImmediatePropagation(); 
 
    $(this).closest(".outter").trigger("click"); 
 
    }); 
 

 
    $(document).on("click", ".outter", function(event) { 
 
    console.log("inside"); 
 
    event.stopImmediatePropagation(); 
 
    var $checkBox = $(this).find("input"); 
 
    
 
    
 

 
    if ($checkBox.prop("checked")) 
 
     $(this).addClass("selected"); 
 
    else 
 
     $(this).removeClass("selected"); 
 
    }); 
 
});

.outter { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.outter:hover, 
 
.inputCheck:hover { 
 
    cursor: pointer; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
    <div class="outter"> 
 
    <input class="inputCheck" type="checkbox"> 
 
    <div>This is a test</div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-03-10 05:56:08

申し訳ありませんAkshayこれは動作しませんdivをクリックしてください –

期待通りにチェックボックスが変更されない

答えて

関連する問題