javascript - 复选框 - 比较选择的值

Question

在复选框上进行选择后如何比较值并显示输出？我正在使用 jQuery 来做到这一点。选择完成后，不会显示输出。它只会在第一次点击时显示。然后，如果我们再次单击，输出将不会改变。下面是我到目前为止编写的代码，

jQuery

$("input:checkbox").on('click', function() {
        var $box = $(this),
        $price = $( "input[name='price_range']:checked").val(),
        $nama_pemohon = "<?php echo $nama_pemohon; ?>", 
        $submited_id = <?php echo $submited_id; ?>,
        $jawatan_pemohon = "<?php echo $jawatan_pemohon; ?>",
        $jabatan_pemohon = "<?php echo $jabatan_pemohon; ?>",
        $submited_by = <?php echo $submited_by; ?>,
        $nama = "<?php echo $nama; ?>",
        $jawatan = "<?php echo $jawatan; ?>",
        $jabatan = "<?php echo $jabatan; ?>";

        if($price == "< RM 10,000"){
            $("#submited_by option").val($submited_by).text($nama);
            $("#jawatan_pemohon").text($jawatan);
            $("#jabatan_pemohon").text($jabatan);
        } else {
            $("#submited_by option").val($submited_id).text($nama_pemohon);
            $("#jawatan_pemohon").text($jawatan_pemohon);
            $("#jabatan_pemohon").text($jabatan_pemohon);
        } 

});

HTML

<input type="checkbox" name="price_range" value="< RM 10,000" class="checker"> < RM 10,000.00
<input type="checkbox" name="price_range" value="< RM 200,000" class="checker"> < RM 200,000.00

<select name="submited_by" id="submited_by">
  <option value="<?php echo $submited_by; ?>"><?php echo $nama;?></option>  
</select>

Answer 1

正如您在 this fiddle 中看到的那样，每次点击第一个复选框时都会发生变化，但只有第一次点击第二个复选框时才会发生变化。

这是因为你的逻辑:

if($price == "< RM 10,000"){
    $("#submited_by option").val($submited_by).text($nama);
    $("#jawatan_pemohon").text($jawatan);
    $("#jabatan_pemohon").text($jabatan);
} else {
    $("#submited_by option").val($submited_id).text($nama_pemohon);
    $("#jawatan_pemohon").text($jawatan_pemohon);
    $("#jabatan_pemohon").text($jabatan_pemohon);
} 

示例:

1. 单击第一个复选框 -> 选项更改为“nama”，因为它进入 if。
2. 单击任何复选框 -> 选项更改为“pemohon”，因为它进入 else。

示例b:

1. 单击第二个复选框 -> 选项更改为“pemohon”，因为它进入 else。
2. 再次单击第二个复选框 -> 选项不会更改，因为它再次进入 else。