Question

我正在尝试在IF语句中运行代码。如果在单击之前没有选中单选按钮，我只希望它运行。

$(document).ready(function() {
  $("#r2").click(function() {
    if($("#radio_2").not(':checked')) {
      $("#radio_2").prop("checked", true);
      $('#object_type').html("<b>Loading...</b>");
      $.post("sql_s.php",{test: 2,}, function(data){$('#object_type').html(data);});
    }
  });
});

$(document).ready(function() {
  $("#r3").click(function() {
    if($("#radio_3").not(':checked')) {
      $("#radio_3").prop("checked", true);
      $('#object_type').html("<b>Loading...</b>");
      $.post("sql_s.php",{test: 3,}, function(data){$('#object_type').html(data);});
    }
  });
});

HTML看起来像这样：

<form action="" id="trans_type">
  <b>Title</b><br />
  <span id="r2"><input type="radio" name="tt1" value="2" id="radio_2" />Option one &nbsp;&nbsp;&nbsp;</span>
  <span id="r3"><input type="radio" name="tt1" value="3" id="radio_3" />Option two</span>
  <div id="object_type"></div>
</form>

还有任何建议将上面的两个jQuery函数合并为一个。

Answer 1

.not()是一个过滤方法，它将返回一个jQuery对象，该对象包含原始集合中不满足传递的选择器的元素，因此它总是很简单。

您需要使用.is()之类的

$(document).ready(function () {
    $("#r3").click(function () {
        if (!$("#radio_3").is(':checked')) {
            $("#radio_3").prop("checked", true);
            $('#object_type').html("<b>Loading...</b>");
            $.post("sql_s.php", {
                test: 3,
            }, function (data) {
                $('#object_type').html(data);
            });
        }
    });
});

另一种选择是

if ($("#radio_3").is(':not(:checked)')) {
}

Answer 2

这是一个适用于两者的功能：

$(document).ready(function () {
    $("#r2,#r3").click(function () {
        var radio = this.children[0];
        if (!radio.checked) {
            radio.checked = true;
            $('#object_type').html("<b>Loading...</b>");
            var idNumber = this.id.match(/.*(\d+)/)[1];
            $.post("sql_s.php", {
                test: idNumber
            }, function (data) {
                $('#object_type').html(data);
            });
        }
    });
    $("#radio_2,#radio_3").change(function(){
       this.checked = false;
    });
});

Answer 3

单选按钮的单击事件仅在选择状态更新后触发，因此将始终在您的函数内检查单选按钮的状态。您真的只想响应未选中的单选按钮上的点击，而不是处理所有点击并检查状态。

使用jquery中的更改事件 - 仅在控件的值更改时触发。对于单选按钮，只有在单击未选中的单选按钮时才会调用此按钮，因为您无法手动取消选择单选按钮。

这是一个适合您特定示例的函数。

$(document).ready(function() {
    function rbChange(event) {
        var rb = $(event.currentTarget);
        var val = rb.val();
        // $.post(....)
        $('#result').text(val + ' unchecked.  Loading Data...');
    }
    $('#trans_type').on('change', '[name="tt1"]', rbChange);
});

jQuery - 如果未选择单选按钮，则运行函数/代码

3 个答案: