Question

我想设置复选框的事件来显示内容。

如果check =“Twitter” - ＆gt;显示twitter的内容如果check =“Facebook”    - ＆GT;显示facebook的内容

如果全部检查（twitter + facebook） - ＆gt;显示twitter +的内容   实

需要选择推特或脸书。

我已经处理了复选框的事件，但没有为每个复选框显示内容：http://jsfiddle.net/vinhnguyenle/hHnUV/

        var $twitter =  $('input[name=twitter]'),
            $facebook = $('input[name=facebook]');

    $twitter.click(function(e) {
        if (!!$facebook.prop('checked') == false) {
            e.preventDefault();
        }
    });

    $facebook.click(function(e) {
        if (!!$twitter.prop('checked') == false) {
            e.preventDefault();
        }
    });

    $twitter.trigger('click');

请帮我显示每个复选框的内容。

谢谢，

Answer 1

我建议：

$('div[id]').each(function(){
    if ($('input[name="' + this.id + '"]').is(':checked')){
        $(this).show();
    }
    else {
        $(this).hide();
    }
});

$('input').change(function (e) {
    $('#' + this.name)[this.checked == true ? 'show' : 'hide']();
});

JS Fiddle demo

Answer 2

这样可行，我添加了一些div来显示facebook / twitter内容：

$(document).ready(function() {    
    $('div[id]').each(function(){
        if ($('input[name="' + this.id + '"]').is(':checked')){
            $(this).show();
         }
        else {
            $(this).hide();
        }

    });

    var $twitter =  $('input[name=twitter]'),
        $facebook = $('input[name=facebook]')

    $twitter.click(function(e) {
        $('#twitter').fadeToggle();
    });

    $facebook.click(function(e) {
        $('#facebook').fadeToggle();
    });

});

Here is the .js fiddle

Answer 3

您可以使用一个事件处理程序来监控这些输入的更改......

添加内容以向您显示行为......

代码Here :)

Answer 4

根据您的要求，如果选择Facebook，则无法选择推特，我认为带有“Twitter，Facebook，Both”选项的单选按钮似乎更有意义。

JS改变：

$(document).ready(function() {   
    $("input:radio").click(function() {
        var test = $(this).val();

        $('#Facebook, #Twitter').hide();        
        $("#"+test).fadeIn();

        if(test == "Both")
        {
            $('#Facebook, #Twitter').fadeIn();
        }
    });     
});

HTML更改：

<input type="radio" name="social" value="Twitter" checked /> Twitter
<input type="radio" name="social" value="Facebook" /> Facebook
<input type="radio" name="social" value="Both" /> Both
<div id="Facebook" style="display:none;">Facebook Content</div>
<div id="Twitter">Twitter Content</div>

JS Fiddle is here

设置复选框的事件

4 个答案: