触发复选框的更改事件 [英] Trigger change event of a checkbox
问题描述
我有7个复选框（A，B，C，D，E，F，G），当我点击其中一个时，该值被附加到textarea。如果我取消选中，则从textarea中删除该值。 jquery代码如下：
var checkboxes = $（input [type ='checkbox']）;
$ b checkboxes.on（'change'，function（）{
$（'＃recipient'）。val（
checkboxes.filter（'：checked'）。map函数（item）{
return this.value;
}）。get（）。join（';'）
）;
}）;
html代码如下：
< div class =col-sm-5>
< div class =form-group>
< label>收件人< / label>
< / div>
< div class =form-group>
< label>讯息< / label>
< / div>
< button type =submitclass =btn btn-default>提交< / button>
< button type =resetclass =btn btn-default>重置< /按钮>
< / div>
< div class =col-sm-5>
< label>& nbsp;< / label>
< div class =col-sm-12>
< div class =panel panel-primary>
< div class =panel-heading>
< h3 class =panel-title>地址簿< / h3>
< / div>
< div class =panel-body>
< div class =checkbox>
< label>
< input type =checkboxclass =membervalue =A> A
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxclass =membervalue =B> B
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxclass =firmvalue =C> C
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxclass =firmvalue =D> D
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxclass =firmvalue =E> E
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxclass =firmvalue =F> F
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxclass =firmvalue =G> G
< / label>
< / div>
< / div>
< / div>
< / div>
< / div>
现在，在点击复选框C时，出现以下复选框D， E，F，G应该被禁用，并且如果这些复选框中的任何一个已经处于选中状态，那么它应该取消选中并触发on change事件（如代码中上面突出显示的那样），这会将该复选框的值从textarea的。我试图使用触发器（更改）选项，但无法找到运气。请帮助我！
请注意，在下面的代码中，我只是用复选框D单独尝试了触发器事件，以查看它是否有效。
$（function（）{
$（。firm [value ='C']）。 b $ b $（。firm [value ='D']）。prop（'checked'，false）.trigger（change）;
$（。firm [value ='D'] ，.firm [value ='E']，.firm [value ='F']，.firm [value ='G']）。attr（disabled，$（this）.is（ ））;
}）;
}）;
这似乎适用于我：
$（。firm [value ='C']）。change（function（）{
$（。firm [value ='D']，.firm [value ='E']，.firm [value ='F']，.firm [value ='G']）。prop（'checked'，false）.trigger （change）;
$（。firm [value ='D']，.firm [value ='E']，.firm [value ='F']，.firm [value ='G '））。attr（disabled，$（this）.is（：checked））;
}）;
你可以在这里看到它：
https://jsfiddle.net/aaronfranco/cvhphzgq/2/
I've 7 checkboxes (A,B,C,D,E,F,G) and when I click one of them, the value is appended to a textarea. If I uncheck one, the value is removed from the textarea. The jquery code is as below:
var checkboxes = $("input[type='checkbox']");
checkboxes.on('change', function() {
$('#recipient').val(
checkboxes.filter(':checked').map(function(item) {
return this.value;
}).get().join('; ')
);
});
The html code is as below:
<div class="col-sm-5">
<div class="form-group">
<label>Recipient</label>
<textarea class="form-control" rows="5" id="recipient"></textarea>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="col-sm-5">
<label> </label>
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address Book</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="A">A
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="B">B
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="C">C
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="D">D
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="E">E
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="F">F
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="G">G
</label>
</div>
</div>
</div>
</div>
</div>
Now, here is a situation where when I click on Checkbox "C", the following checkboxes D,E,F,G should be disabled as well as if anyone of those checkboxes are already in checked state then it should uncheck and trigger the on change event (as highlighted above in the code) which will remove the value of that checked box from the textarea. I have tried to use the trigger("change") option but could not find a luck. Please help me!
Please note, in the code below I've just tried the trigger event with checkbox D alone to see if it works.
$(function(){
$(".firm[value='C']").change(function(){
$(".firm[value='D']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
});
This seems to work for me:
$(".firm[value='C']").change(function(){
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
You can see it in action here: https://jsfiddle.net/aaronfranco/cvhphzgq/2/
这篇关于触发复选框的更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
